From this I got my div to scroll horizontally.
overflow-x:scroll;
white-space: nowrap;
However, in mobile devices, this div also scrolls when the content is touched, I only want it to scroll when the scrollbar is touched.
The reason is that the div content has a slider which must be scrolled as well and the user has to be precise in order to touch the slider.
I only want the div to be scrolled when the scrollbar is touched. Is that possible?
Best
Try below, I have added a position: fixed div inside scrolling div and reduced the scrollbar width from total width.
.scroll{
overflow-x:scroll;
white-space: nowrap;
height: 200px;
position: relative;
}
.scroll .overlay{
position: fixed;
top: 0;
left:0;
width: calc(100% - 30px);
height: 200px;
}<div class="scroll">
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p><p>a</p>
<div class="overlay"></div>
</div>