Poor scrolling experience on mobile

[brakai295]

Hey there!

Does anyone else have a poor experience trying to scroll a long, open modal window on mobile (using iOS Chrome). When I scroll up or down, it sometimes moves the background, sometimes the modal window (which is what I want).

Is there perhaps a way to fix this?

Thank you!

[iamlinkus]

Yeah, I'm experiencing the same thing!

[brakai295]

Have you found a workaround? I'm wondering if it has to do with the background being scrollable.

Have you had anyone else report about this issue @kylefox?

[kylefox]

@brakai295 Nobody else has reported it, but I agree - the scrolling on mobile could definitely use improvement. I did a quick Google search and it looks like this has been a problem with Bootstrap's modal as well.

I won't be able to dig into this issue immediately, so feel free to research further (anyone). Here are a few links that might be helpful to others or my future self :grin:

• Caveats on overflow and scrolling modals (Bootstrap Docs)
• Modal scrolling on mobile devices (Bootstrap GitHub Issue)
• Prevent BODY from scrolling when a modal is opened (StackOverflow Discussion)

[brakai295]

Thanks for the feedback, @kylefox! Much appreciated. I'll try to look into it more closely.

For reference, this modal plugin works flawlessly on mobile. Not sure how/if they're using overflow though.

Update: I noticed that Mag Popup applies the overflow: hidden to the html rather than body tag.

[Mih333]

WORKED 100% on IOS and Safari browser I fix this with : body.modal-open { overflow: hidden; }

[iamkeir]

In case it helps others, this is how I combat this issue:

$(document).on($.modal.BLOCK, function(event, modal) {
  $(html).addClass('no-scroll');
});

$(document).on($.modal.AFTER_CLOSE, function(event, modal) {
  $(html).removeClass('no-scroll');
});

html.no-scroll,
html.no-scroll body {
  overflow: hidden !important;
  max-height: 100% !important;
}

[steakscience]

@iamkeir This seems to work on Android for me, but doesn't work on iOS. The html/body is still scrolling.

[proimage]

The best way I've encountered so far to prevent body scrolling while retaining the scroll position (including on iOS 12 devices) actually does NOT include overflow: hidden: https://stackoverflow.com/a/54798936/999556

Basically, set the body to position: fixed and the top/left/right/bottom declarations to 0 (via toggling a CSS class on body). Then get the current scrollTop distance with JS, and set the body's top to the negative of that scroll distance. When closing the modal, unset the top, and restore the scrollTop to the stored distance.

[brakai295]

In case it helps others, this is how I combat this issue:

$(document).on($.modal.BLOCK, function(event, modal) {
  $html.addClass('no-scroll');
});

$(document).on($.modal.AFTER_CLOSE, function(event, modal) {
  $html.removeClass('no-scroll');
});

html.no-scroll,
html.no-scroll body {
  overflow: hidden !important;
  max-height: 100% !important;
}

Hey @iamkeir, I'm trying to use this code but I keep getting:

Uncaught ReferenceError: $html is not defined

Any ideas what I can do?

[iamkeir]

@brakai295 I'm using $html as I already defined it as a variable earlier in my code as var $html = $('html'). You can use that, or simply $('html') in place of any instance of $html.

[brakai295]

Thanks @iamkeir! So I used this code instead:

        $(document).on($.modal.BLOCK, function(event, modal) {
	  $(html).addClass('no-scroll');
	});

	$(document).on($.modal.AFTER_CLOSE, function(event, modal) {
	  $(html).removeClass('no-scroll');
	});

but I'm still getting JS errors:

Uncaught ReferenceError: html is not defined
    <anonymous> http://kais-macbook-pro-13.local:5757/...index.php?ckcachecontrol=1595628791:132
    jQuery 7
    block http://kais-macbook-pro-13.local:5757/.../js/modal-min.js:1
    open http://kais-macbook-pro-13.local:5757/.../js/modal-min.js:1
    modal http://kais-macbook-pro-13.local:5757/.../js/modal-min.js:1
    jQuery 4

I'm a total noob, so I'm not really sure what I'm doing. 😕 Your help would be hugely appreciated!

[iamkeir]

@brakai295 Sorry, I wasn't paying attention when I posted - you need $('html') not $(html). I recommend reading a basic intro tutorial for jQuery as it is easy to understand and will help you with some of these basic issues. Good luck!

[brakai295]

@iamkeir Thanks so much for your help! Working now. 🙂

[brakai295]

@iamkeir After implementing the above, whenever I click to open a modal, the page in the background jumps to the top. Do you remember finding a way to fix that too? 😉

[iamkeir]

@brakai295 it's an unfortunate irritation - removing the scroll on html means it doesn't maintain scroll position. You can add some JavaScript to detect the current scroll position at the time of launching the modal and reinstate it. Google around the topic as it is a well known issue not limited to this particular modal plugin. If I remember correctly, there is no perfect solution - you just have to choose the solution that is the lesser of the evils for your specific implementation. Good luck!