В общем вопрос в том как сделать что бы у блока изначально был индикатор прокрутки, подскажите вариант реализации пожалуйста, нужно что бы оно приделалось именно с помощью JavaScript. Есть вот такой блок:
<div class="container">
<div class="row">
<div class="col-md-4 scrollable small-block">
<div class="col-md-8 big-block">
Как сделать что бы small-block был меньше по высоте и его можно было скроллить?
Вот мой вариант решения:
В стиле просто оформление для наглядности блоков, в html ваша не измененная разметка по которой и приделывали скролл внизу:
.small-block {
height: 600px;
background-color: blue;
}
.big-block {
background-color: gray;
height: 1000px;
}
<div class="container">
<div class="row">
<div class="col-md-4 scrollable small-block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias aliquid, animi aperiam aut eligendi error est expedita incidunt magni maiores molestiae nemo neque, odit, quasi quibusdam quo tempore. Accusantium explicabo fuga fugit in inventore nostrum quibusdam, repudiandae unde vel?
<div class="col-md-8 big-block">
$("div.small-block").css('overflow-x','scroll');
</script>
Очень долго пытался добиться чего то с помощью метода JQuery prop, но всё в пустую, затем посмотрел на другие методы и нашел css, сразу же получилось, в js выбираем по селектору маленький блок и с помощью метода css() задаем свойство overflow-x:scroll, делая ему скролл по горизонтали.