[ANSWERED] javascript – Prevent drag scrolling in Safari on Mac

Question 1

You can add an intermediary div. then, set width, height, overflow properties to it.

.parent {
  width: 200px;
  height: 200px;
  border: 1px dashed black;
  overflow-x: auto;
  overflow-y: hidden;
}

/** intermediary div */
.parent > div {
  width: 200%;
  height: 100%;
  overflow: hidden;
}

.child {
  width: 100%; /** this should be 100% **/
  height: 200%;
  background: linear-gradient(to right bottom, red, tomato), linear-gradient(to bottom, white, black);
  background-size: 50px 50px, 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

<div class="parent">
  <div>
    <div class="child"></div>
  </div>
</div>

Or add pointer-events:none to parent.

.parent {
  /* This prevents dragging */
  pointer-events: none;
  width: 200px;
  height: 200px;
  border: 1px dashed black;
  overflow-x: auto;
  overflow-y: hidden;
}
.child {
  width: 200%;
  height: 200%;
  background: linear-gradient(to right bottom, red, tomato), linear-gradient(to bottom, white, black);
  background-size: 50px 50px, 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

<div class="parent">
  <div class="child"></div>
</div>

Question 2

This is definitely an interesting find! You’d think this would be impossible since you set overflow-y to none. Nonetheless you can prevent this behavior and disallow clicks inside the parent using this JavScript:

const parent = document.querySelector('.parent');
parent.addEventListener('mousedown', e => e.preventDefault());

By adding preventDefault() to the event triggered on mousedown, you prevent the browser from evaluating any further events related to that click, including dragging. Here it is in action:

const parent = document.querySelector('.parent');
parent.addEventListener('mousedown', e => e.preventDefault());

.parent {
  width: 200px;
  height: 200px;
  border: 1px dashed black;
  overflow-x: auto;
  overflow-y: hidden;
}

.child {
  width: 200%;
  height: 200%;
  background: linear-gradient(to right bottom, red, tomato), linear-gradient(to bottom, white, black);
  background-size: 50px 50px, 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

<div class="parent">
  <div class="child"></div>
</div>

Question 3

Using css you can give pointer-events:none; to avoid any events occurring while clicking it.

Question 4

Take a look at this codepen
There’s red square in the corner.

If you click (using mouse or touchpad) this square and drag it down – in Safari on Mac .parent element will scroll down.
Even though .parent has overflow-y: hidden;

No scrolling occurs in all other browsers.
How can I prevent this scrolling on safari?
As a rough solution, I can listen to the scroll and override the scrollTop if it’s not zero, but perhaps there is a more elegant solution?

Bollate

[ANSWERED] javascript – Prevent drag scrolling in Safari on Mac

By

Solution 1 :

Solution 2 :

Solution 3 :

Problem :

Comments

Comment posted by Brandon McConnell

Comment posted by Denis

Comment posted by Brandon McConnell

Comment posted by Moorthy G

Comment posted by Denis

Comment posted by Brandon McConnell

Comment posted by Denis

By

Related Post

[ANSWERED] html – Child div has an offset border

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] problem in selecting list item in html/css

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate