[英]Disable scrolling on body in overlay modal view
I am using this script to display and hide a modal view, but I want to disable scrolling on body once the modal view is opened and disable it when it is closed. 我正在使用此脚本来显示和隐藏模态视图,但是我想在打开模态视图时禁用主体上的滚动,并在关闭时禁用它。
I tried to modify the JS code but it works but it breaks the opening animation. 我试图修改JS代码,但它工作但它打破了开始动画。 here is the code modified:
这是修改后的代码:
(function() {
var triggerBttn = document.getElementById( 'trigger-overlay' ),
overlay = document.querySelector( 'div.overlay' ),
bodyTag = document.querySelector( 'body' ),
closeBttn = overlay.querySelector( 'button.overlay-close' );
transEndEventNames = {
'WebkitTransition': 'webkitTransitionEnd',
'MozTransition': 'transitionend',
'OTransition': 'oTransitionEnd',
'msTransition': 'MSTransitionEnd',
'transition': 'transitionend'
},
transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
support = { transitions : Modernizr.csstransitions };
function toggleOverlay() {
if( classie.has( overlay, 'open' ) ) {
classie.remove( overlay, 'open' );
classie.add( overlay, 'close' );
var onEndTransitionFn = function( ev ) {
if( support.transitions ) {
if( ev.propertyName !== 'visibility' ) return;
this.removeEventListener( transEndEventName, onEndTransitionFn );
}
classie.remove( overlay, 'close' );
classie.remove( bodyTag, 'noscroll' );
};
if( support.transitions ) {
overlay.addEventListener( transEndEventName, onEndTransitionFn );
}
else {
onEndTransitionFn();
}
}
else if( !classie.has( overlay, 'close' ) ) {
classie.add( overlay, 'open' );
classie.add( bodyTag, 'noscroll' );
}
}
triggerBttn.addEventListener( 'click', toggleOverlay );
closeBttn.addEventListener( 'click', toggleOverlay );})();
First add jquery. 首先添加jquery。 Download from https://jquery.com and add it to your document with
<script src="jquery.min.js"></script>
. 从https://jquery.com下载并使用
<script src="jquery.min.js"></script>
将其添加到您的文档中。
Then, at the bottom of the document (your document with your animation) add the following snip: 然后,在文档的底部(带有动画的文档)添加以下片段:
<script>
$(document).ready(function() {
$('#trigger-overlay').click(function() {
$('html').css('overflow', 'hidden');
$('body').bind('touchmove', function(e) {
e.preventDefault()
});
});
$('.overlay-close').click(function() {
$('html').css('overflow', 'scroll');
$('body').unbind('touchmove');
});
});
</script>
I have tried this with code from https://github.com/codrops/FullscreenOverlayStyles and animation Huge inc
. 我试过这个来自https://github.com/codrops/FullscreenOverlayStyles和动画
Huge inc
代码。 This will prevent scrolling of text when animation is open. 这将阻止在动画打开时滚动文本。
Updated my answer , first answer did allow scrolling on touch devices. 更新了我的答案 ,第一个答案确实允许在触摸设备上滚动。
already discussed here: Prevent BODY from scrolling when a modal is opened 已在此处讨论: 当打开模态时,防止BODY滚动
it is using bootstrap, but the same solution can still work. 它使用bootstrap,但相同的解决方案仍然可以工作。 the second answer is a bit better than the accepted one.
第二个答案比接受的答案好一点。 it suggests toggling a class on the body that makes the body
overflow: hidden;
它建议在身体上翻一个使身体
overflow: hidden;
when the modal is open. 当模态打开时。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.