我想让我的身体在使用鼠标滚轮时停止滚动，而我的网站上的Modal(来自http://twitter.github.com/bootstrap)是打开的。
当模式被打开时，我试图调用下面的javascript片段，但没有成功
$(window).scroll(function() { return false; });
AND
$(window).live('scroll', function() { return false; });
请注意，我们的网站放弃了对IE6的支持，IE7+需要兼容。
当前回答
基于此提琴:http://jsfiddle.net/dh834zgw/1/
下面的代码片段(使用jquery)将禁用窗口滚动:
var curScrollTop = $(window).scrollTop();
$('html').toggleClass('noscroll').css('top', '-' + curScrollTop + 'px');
在你的css中:
html.noscroll{
position: fixed;
width: 100%;
top:0;
left: 0;
height: 100%;
overflow-y: scroll !important;
z-index: 10;
}
现在，当你删除模态时，不要忘记删除html标签上的noscroll类:
$('html').toggleClass('noscroll');
其他回答
因为对我来说，这个问题主要出现在iOS上，所以我提供了只在iOS上修复的代码:
if(!!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)) {
var $modalRep = $('#modal-id'),
startScrollY = null,
moveDiv;
$modalRep.on('touchmove', function(ev) {
ev.preventDefault();
moveDiv = startScrollY - ev.touches[0].clientY;
startScrollY = ev.touches[0].clientY;
var el = $(ev.target).parents('#div-that-scrolls');
// #div-that-scrolls is a child of #modal-id
el.scrollTop(el.scrollTop() + moveDiv);
});
$modalRep.on('touchstart', function(ev) {
startScrollY = ev.touches[0].clientY;
});
}
您需要超越@charlietfl的答案并考虑滚动条，否则您可能会看到一个文档回流。
打开模式:
记录身体宽度 将正文溢出设置为隐藏 显式地将主体宽度设置为步骤1中的宽度。 Var $body = $(document.body); var oldWidth = $body.innerWidth(); 美元body.css(“溢出”,“隐藏”); 美元body.width (oldWidth);
关闭模态:
将body overflow设置为auto 将车身宽度设置为auto Var $body = $(document.body); 美元body.css(“溢出”,“汽车”); 美元body.width(“自动”);
灵感来源:http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php
我有一个边栏，是由复选框黑客生成的。 但主要思想是保存文档scrollTop，而不是在滚动窗口期间更改它。
我只是不喜欢页面跳转时，身体变成'溢出:隐藏'。
window.addEventListener('load', function() { let prevScrollTop = 0; let isSidebarVisible = false; document.getElementById('f-overlay-chkbx').addEventListener('change', (event) => { prevScrollTop = window.pageYOffset || document.documentElement.scrollTop; isSidebarVisible = event.target.checked; window.addEventListener('scroll', (event) => { if (isSidebarVisible) { window.scrollTo(0, prevScrollTop); } }); }) });
我对Bootstrap 3的解决方案:
.modal {
overflow-y: hidden;
}
body.modal-open {
margin-right: 0;
}
因为对我来说唯一的溢出:隐藏在身上。模态打开类并没有阻止页面向左移动，因为原始的右距:15px。
对于那些想知道如何获得滚动事件的引导3模态:
$(".modal").scroll(function() {
console.log("scrolling!);
});
