Div horizontally scrolling without touch

Question

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

score 1 · Accepted Answer · answered Apr 27 '22 at 05:42

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>

Div horizontally scrolling without touch

1 Answers1