how to disable scrolling on background divs in mobile web application

Question

in mobile web application I'd often use modals.

Some modals can expand sizes and thus were made scrollable.

How can I enable higher z-indexed modal to be scrollable and set background div not to scroll?

b/c whenever I scroll with two fingers on the current modal, sometimes background scroll, sometimes foreground scrolls.

Answer 1

I think you can't fix background with background-attachment: fixed; you have to apply position: fixed on it and then

You should try iScroll 4

"iScroll finally received a complete rewrite. Now it’s smoother than ever and adds some new important features: pinch/zoom, pull down to refresh, snap to elements and more custom events for a higher level of hackability."

or

skrollr 0.6.25

Stand-alone parallax scrolling JavaScript library for mobile (Android, iOS, etc.) and desktop in about 12k minified.

Other Helpful link

http://webdesigner-webdeveloper.com/weblog/fullscreen-images-for-the-ipad-ios-and-mobile-safari/

https://github.com/louisremi/background-size-polyfill/issues/27

http://bradfrostweb.com/blog/mobile/fixed-position/

Hope this answer little bit helpful for you. :)

Answer 2

There are a couple "hacky" ways to get this working. Here are a couple off the top of my head (that I've experimented with in the past) - if you're targeting iOS devices, just skip to #3...

1) Use JS and prevent scrolling. You would want to check if the element within the modal is scrollable or not. If it's not, you disable touch events, preventing the user from scrolling. Be mindful of direction. Also, devices that would typically "rubberband" the scroll will stop.

Sorry, no fiddle to demonstrate.

2) Apply absolute positioning to the body element with overflow hidden. As weird as it sounds, if you apply absolute position to the body, you can prevent the page from scrolling. However, layout issues might prevent you from using this. In addition, when you apply the position to the body, any scroll offset will be removed, and the page will scroll to 0,0. Also, the page will still rubberband (if the device supports rubberbanding) resulting in a weird interaction.

JS fiddle: http://fiddle.jshell.net/L7FJF/show/

3) If you're targeting iOS devices (or newer Chrome browsers on Android), there's a fun workaround when using -webkit-overflow-scrolling: touch and rubberbanding. Using JS, you can always offset the scrollable div +/-1px to prevent background scrolling. (To be honest, this is my favorite work around since it works great. However, it's limited to just iOS w/ overflow-scrolling support.)

JS fiddle: http://fiddle.jshell.net/jDqSP/show/

Hope this helps!