CODEWITHSUNDEEP
javascripthtmljquerycss
Michael Chourdakis
Michael Chourdakis

Reputation: 11158

Div horizontally scrolling without touch

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

Upvotes: 0

Views: 50

Answers (1)

AG_
AG_

Reputation: 2689

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>

Upvotes: 1

Related Questions