jQuery 禁用和启用滚动
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/10711949/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery disable and enable scrolling
提问by Taras Kudrych
$('.news-wrap').mouseenter(function(event) {
$(window).mousewheel(function(event) {
event.preventDefault();
});
});
Window scrolling is disabled, each I leave the element. How can I enable scrolling with mouseleave event?
窗口滚动被禁用,每次我离开元素。如何使用 mouseleave 事件启用滚动?
采纳答案by just eric
Like this?
像这样?
$('#abs').bind('mousewheel DOMMouseScroll', function(e) {
var scrollTo = null;
if (e.type == 'mousewheel') {
scrollTo = (e.originalEvent.wheelDelta * -1);
} else if (e.type == 'DOMMouseScroll') {
scrollTo = 1000 * e.originalEvent.detail;
}
if (scrollTo) {
e.preventDefault();
$(this).scrollTop(scrollTo + $(this).scrollTop());
}
});?
回答by Josh Harrison
I've written a jQuery plugin to handle this: $.disablescroll.
我写了一个 jQuery 插件来处理这个:$.disablescroll。
It stops scrolling from mousewheel, touchmove, and buttons such as Page Down.
它停止从鼠标滚轮、触摸移动和诸如Page Down.
$('.news-wrap').mouseenter(function() {
$(window).disablescroll();
}).mouseleave(function() {
$(window).disablescroll("undo");
});
Hope someone finds this helpful.
希望有人觉得这有帮助。
回答by Jonathan Plotz
I am currently using a plugin on bootstrap tour and the goal was to Disable scroll when clicking a link and enable it when you clicked an 'end tour' button in the tour.
我目前正在引导程序游览中使用插件,目标是在单击链接时禁用滚动,并在单击游览中的“结束游览”按钮时启用它。
In HTML create the div
link by an id
:
在 HTML 中通过以下方式创建div
链接id
:
<div id='placeholder'><a href='#'>Placeholder link</a> </div>
Instantiate jquery with a click function.
使用单击功能实例化 jquery。
start jquery:
启动jquery:
$(document).ready(function() {
/*click Function*/
$('#placeholder').click(function(){
/*Disables scrolling*/
$('body').css('scroll', function(){
window.scrollTo(0,0);
});
});
});
Plugin option bootstrap tour when you end the popover:
结束弹出窗口时的插件选项引导程序:
/*This fire when clicking End Tour & placeholder would only work if that what you named the tour.*/
onEnd: function(placeholder) {
/*Enable scroling*/
$('body').css({ 'overflow': 'scroll' });
$(document).off('scroll');
}