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.
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
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. :)
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!
assume the only div you want to allow to scroll is
<div class="scroll">...</div>
here is the code. works on ios and android, also handled the problem that when son has scrolled to end, parent's scroll will automatically be triggered.
$(document).on('touchmove', function(e) {
e.preventDefault();
}).ready(function() {
$('.scroll').on('touchstart', function(e) {
this.allowUp = (this.scrollTop > 0);
this.allowDown = (this.scrollTop < this.scrollHeight - this.clientHeight);
this.prevTop = null;
this.prevBot = null;
this.lastY = e.originalEvent.touches[0].clientY;
}).on('touchmove', function(e) {
var event = e.originalEvent;
var up = (event.touches[0].clientY > this.lastY), down = !up;
this.lastY = event.touches[0].clientY;
if ((up && this.allowUp) || (down && this.allowDown))
event.stopPropagation();
else
event.preventDefault();
});
});
when you don't need to ban scroll, you just remove the listener like this:
document.addEventListener('touchmove', handleTouchMove, false);
document.removeEventListener('touchmove', handleTouchMove);
from https://stackoverflow.com/a/13278230/1982712 & prevent full page scrolling iOS (which is the questioner's own answer). (my main account has been banned :( )
I was facing same problem and CSS property touch-action: none; solved my problem on iPhone with Safari browser. More infrmation here https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
