vue-range-slider icon indicating copy to clipboard operation
vue-range-slider copied to clipboard

Scrollbar locked on mobile

Open joefazee opened this issue 5 years ago • 10 comments

Hi,

Is anyone experiencing scrollbar locked on mobile? Not sure what the problem is. No error on the console, have checked all css as well.

The issue is only on mobile browsers. Have tested on Safari iOS 13, Chrome on iOS and Android phones. The result is the same. The scrollbar is locked.

EDITED: I noticed modal on that page with form also is blocked.

Thank you in advance.

joefazee avatar Sep 21 '19 13:09 joefazee

I'm also having this issue.

@devs - could this be resolved asap?

Thanks!

thanhphamm avatar Sep 23 '19 06:09 thanhphamm

I get this error as well.. Is there a fix?

lorddubbs avatar Oct 19 '19 23:10 lorddubbs

This component appears to hijack all touchmove (and mousemove) events for the whole containing document, calling e.preventDefault(); as its first order of business. That clobbers anything to do with touch for the rest of the page, which likely isn't what we want to happen.

I fixed it by modifying the move function (that gets bound to that touchmove event on the document), so that it only calls preventDefault if we're actually dragging the slider:

				if (this.flag && this.dragFlag)
				{
					e.preventDefault();

					if (this.stopPropagation)
					{
						e.stopPropagation();
					}
				}

jasonkester avatar Oct 22 '19 10:10 jasonkester

This component appears to hijack all touchmove (and mousemove) events for the whole containing document, calling e.preventDefault(); as its first order of business. That clobbers anything to do with touch for the rest of the page, which likely isn't what we want to happen.

I fixed it by modifying the move function (that gets bound to that touchmove event on the document), so that it only calls preventDefault if we're actually dragging the slider:

				if (this.flag && this.dragFlag)
				{
					e.preventDefault();

					if (this.stopPropagation)
					{
						e.stopPropagation();
					}
				}

Do you have a fork with this fix?

3dgroup avatar Oct 23 '19 07:10 3dgroup

Do you have a fork with this fix?

No. I just changed my local copy.

Those few lines are the entire thing.

jasonkester avatar Nov 02 '19 14:11 jasonkester

Is it possible that this is the same problem? https://i.gyazo.com/f70cee1c511e8b89ad0ddc83fd3312ed.mp4

Vissie2 avatar Mar 25 '20 13:03 Vissie2

я поменял атрибут "passive: true" с "passive: false" в функции

function addEvent(el, type, fn, capture) {
    el.addEventListener(type, fn, {
      passive: true,
      capture: !!capture
    });
  }

И собственно все заработало. Либо можно пойти более длинным и сложным путем, меня отдельную логику для addEvent(document, EVENT_TOUCH_MOVE, this._move);

askuratovich avatar Jun 03 '20 18:06 askuratovich

Is there any solution to this problem without editing source code?

CouldBeFree avatar Apr 02 '21 13:04 CouldBeFree

я поменял атрибут "passive: true" с "passive: false" в функции

function addEvent(el, type, fn, capture) {
    el.addEventListener(type, fn, {
      passive: true,
      capture: !!capture
    });
  }

И собственно все заработало. Либо можно пойти более длинным и сложным путем, меня отдельную логику для addEvent(document, EVENT_TOUCH_MOVE, this._move);

this works.

brnpimentel avatar Apr 15 '21 19:04 brnpimentel

There is PR https://github.com/xwpongithub/vue-range-slider/pull/34 but it's not merged still ((

s-a-rogova avatar Jul 09 '24 10:07 s-a-rogova