قالب وردپرس درنا توس
Home / IOS Development / css – Scrolling issues with body and fixed div in Safari / Chrome / Firefox for iOS

css – Scrolling issues with body and fixed div in Safari / Chrome / Firefox for iOS



Here is a test website:

https://codepen.io/zephyr103/pen/KOxgzL

contains code that:

  body.no-scroll {
overflow: hidden;
}

It works in my MacOSX browsers (including the iOS / Android simulators in Chrome) and usually works well in Android. It has issues in Safari, Chrome and Firefox in iOS.

When you click "Short Quote" or "Long Quote", it has a variable height popup popup with a transparent gray overlay that you can click to exit popup.

When you browse (using touch drag or mouse wheel) popups or overlays, you are meant to either ignore it (when browsing the gray overlay) or browse the popup content ̵

1; if something is hidden. If none of the popup screens are hidden, it also ignores drag.

Here's how it works:
# Text-viewer popup uses overflow-y auto. When the popup is active, it adds the "no-scroll" class to the body element. This class has css for "hidden" for overflow. This is intended to prevent the body from scrolling whether you drag the pop-up screen or the gray overlay.

On iOS, the transparent overlay can be rolled, and when you browse the "Short Quote" popup, it also scrolls the body. When you go with the short offer window, something is not meant to roll.


Source link