Wednesday, 9 December 2015

bootstrap modal scrolling background ipad


https://github.com/twbs/bootstrap/issues/7501

http://stackoverflow.com/questions/9538868/prevent-body-from-scrolling-when-a-modal-is-opened

http://stackoverflow.com/questions/7768269/ipad-safari-disable-scrolling-and-bounce-effect

http://stackoverflow.com/questions/25919955/how-can-i-catch-touchmove-events-on-an-element-that-is-added-to-the-dom-after-my



if you check online there are two different ways to solve it. but they all wrong. they all try to stop body scroll.  which will just stop bouncing. but the touch event is captured by safari, you just stop the web page play bouncing. the touch and move event still pass to the body and end here.



1 way is by css:

body .modal-open {
position:relative;
overflow: hidden;
}


2. stop the event when the body get it.

document.ontouchmove = function(event){
    event.preventDefault();
}


The right way is get the moving event when the body wrongly get it and pass to modal.



document.ontouchstart = function(e) {
    $("#myModal").trigger(e);
};

document.onmousedown = function(e) {
    $("#myModal").trigger(e);
};


document.ontouchend = function(e) {
    $("#myModal").trigger(e);
};


document.onmouseup = function(e) {
    $("#myModal").trigger(e);
};


document.ontouchmove = function(e) {
    $("#myModal").trigger(e);
};




No comments:

Post a comment