如何使用 jQuery 以编程方式禁用页面滚动

使用 jQuery，我想禁用正文的滚动:

我的想法是:

  1. 设定 body{ overflow: hidden;}
  2. 捕获当前 scrollTop();/scrollLeft()
  3. 绑定到主体滚动事件，将 scrollTop/scrollLeft 设置为捕获的值。

还有更好的办法吗？

更新:

请看我的例子，以及原因，在 http://jsbin.com/ikuma4/2/edit

我知道有些人会想“为什么他不在面板上使用 position: fixed呢?”。

请不要建议这样做，因为我有其他原因。

490181 次浏览
小开
最佳答案

我找到的唯一方法和你描述的相似:

  1. 抓取当前滚动位置(不要忘记水平轴!)。
  2. 将溢出设置为隐藏(可能希望保留以前的溢出值)。
  3. 使用 scrollTo ()将滚动文档存储到滚动位置。

然后，当您准备再次允许滚动时，取消所有这些操作。

编辑: 没有理由我不能给你的代码，因为我去麻烦挖出来..。

// lock scroll position, but retain settings for later
var scrollPosition = [
self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
self.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
];
var html = jQuery('html'); // it would make more sense to apply this to body, but IE7 won't have that
html.data('scroll-position', scrollPosition);
html.data('previous-overflow', html.css('overflow'));
html.css('overflow', 'hidden');
window.scrollTo(scrollPosition[0], scrollPosition[1]);




// un-lock scroll position
var html = jQuery('html');
var scrollPosition = html.data('scroll-position');
html.css('overflow', html.data('previous-overflow'));
window.scrollTo(scrollPosition[0], scrollPosition[1])
小开

这可能适合您的目的，也可能不适合您的目的，但是您可以扩展 JScrollPane以在它进行滚动之前触发其他功能。我只是稍微测试了一下，但是我可以确定你可以跳进来完全阻止滚动。我只是:

  • 下载演示压缩文件: http://github.com/vitch/jScrollPane/archives/master
  • 打开“ Events”demo (Events.html)
  • 编辑它以使用非缩小的脚本源: <script type="text/javascript" src="script/jquery.jscrollpane.js"></script>
  • 在 jquery.jscrollpane.js 中，在第666行(吉祥的行号！但是如果您的版本稍有不同，这是 positionDragY(destY, animate)函数的第一行

启动 events s.html，您将看到一个正常滚动的框，由于您的编码干预，它不会滚动。

您可以通过这种方式控制整个浏览器的滚动条(参见 fullpage _ scroll.html)。

因此，推测下一步是添加一个对其他函数的调用，这个函数启动并执行锚定魔法，然后决定是否继续滚动。还有设置 scrollTop 和 scrollLeft 的 API 调用。

如果你需要更多的帮助，就在你起床的地方张贴吧！

希望这对你有帮助。

小开

你不能只是设置身高为100% 和溢出隐藏? 见 http://jsbin.com/ikuma4/13/edit

小开

我给出了一个可能有帮助的答案: 禁用滚动

它显示了如何在不移动文本的情况下关闭滚动条。您可以忽略关于 simplemode 的部分。

小开

你可以使用以下代码:

$("body").css("overflow", "hidden");
小开

您可以使用可滚动的 div 来覆盖窗口，以防止页面上的内容滚动。 并且，通过隐藏和显示，您可以锁定/解锁您的卷轴。

做这样的事情:

#scrollLock {
width: 100%;
height: 100%;
position: fixed;
overflow: scroll;
opacity: 0;
display:none
}


#scrollLock > div {
height: 99999px;
}


function scrollLock(){
$('#scrollLock').scrollTop('10000').show();
}


function scrollUnlock(){
$('#scrollLock').hide();
}
小开

我只是通过 Tfe对解决方案进行了一些调优。特别是，我添加了一些额外的控制，以确保在滚动条设置为 hidden时有 页面内容不能移动(又名 翻页)。

可以分别定义两个 Javascript 函数 lockScroll()和 unlockScroll()来锁定和解锁页面滚动。

function lockScroll(){
$html = $('html');
$body = $('body');
var initWidth = $body.outerWidth();
var initHeight = $body.outerHeight();


var scrollPosition = [
self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
self.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
];
$html.data('scroll-position', scrollPosition);
$html.data('previous-overflow', $html.css('overflow'));
$html.css('overflow', 'hidden');
window.scrollTo(scrollPosition[0], scrollPosition[1]);


var marginR = $body.outerWidth()-initWidth;
var marginB = $body.outerHeight()-initHeight;
$body.css({'margin-right': marginR,'margin-bottom': marginB});
}


function unlockScroll(){
$html = $('html');
$body = $('body');
$html.css('overflow', $html.data('previous-overflow'));
var scrollPosition = $html.data('scroll-position');
window.scrollTo(scrollPosition[0], scrollPosition[1]);


$body.css({'margin-right': 0, 'margin-bottom': 0});
}

我假设 <body>没有初始保证金。

请注意，虽然上述解决方案在大多数实际情况下都可以工作，但它并不是确定的，因为它需要对页面进行一些进一步的定制，例如，包含 position:fixed的页眉。让我们用一个例子来研究这个特例。应该有

<body>
<div id="header">My fixedheader</div>
<!--- OTHER CONTENT -->
</body>

和

#header{position:fixed; padding:0; margin:0; width:100%}

然后，应该在函数 lockScroll()和 unlockScroll()中添加以下内容:

function lockScroll(){
//Omissis




$('#header').css('margin-right', marginR);
}


function unlockScroll(){
//Omissis


$('#header').css('margin-right', 0);
}

最后，注意一些可能的边距或填充的初始值。

小开

对于那些拥有居中布局(通过 margin:0 auto;)的人来说，这里是 position:fixed解决方案与 @ tfe提出的解决方案的混搭。

如果遇到页面快照(由于滚动条显示/隐藏) ，请使用此解决方案。

// lock scroll position, but retain settings for later
var scrollPosition = [
window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
window.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
];
var $html = $('html'); // bow to the demon known as MSIE(v7)
$html.addClass('modal-noscroll');
$html.data('scroll-position', scrollPosition);
$html.data('margin-top', $html.css('margin-top'));
$html.css('margin-top', -1 * scrollPosition[1]);

再加上..。

// un-lock scroll position
var $html = $('html').removeClass('modal-noscroll');
var scrollPosition = $html.data('scroll-position');
var marginTop = $html.data('margin-top');
$html.css('margin-top', marginTop);
window.scrollTo(scrollPosition[0], scrollPosition[1])

最后是 .modal-noscroll的 CSS。

.modal-noscroll
{
position: fixed;
overflow-y: scroll;
width: 100%;
}

我冒昧地说，这是一个比其他任何解决方案更适当的修复，但我还没有测试它 那个彻底... : P

编辑: 请注意，我不知道如何糟糕，这可能会执行(读: 爆炸)在触摸设备。

小开

这将禁用 彻底的滚动:

$('html, body').css({
overflow: 'hidden',
height: '100%'
});

恢复:

$('html, body').css({
overflow: 'auto',
height: 'auto'
});

在 Firefox 和 Chrome 上进行了测试。

小开

我已经编写了一个 jQuery 插件来处理这个问题: < a href = “ https://github.com/ultrapasty/jquery-disablescroll”> $. disablescroll 。

它可以防止鼠标滚轮、触摸和按键事件(如 Page Down)的滚动。

有一个 在这里演示。

用法:

$(window).disablescroll();


// To re-enable scrolling:
$(window).disablescroll("undo");
小开

你也可以使用 DOM 来实现这个功能，比如你有一个这样的函数:

function disable_scroll() {
document.body.style.overflow="hidden";
}

这就是它的全部! 希望除了所有其他的答案之外，这也有所帮助！

小开

试试这个

$('#element').on('scroll touchmove mousewheel', function(e){
e.preventDefault();
e.stopPropagation();
return false;
})
小开

这就是我最后所做的:

咖啡剧本:

    $("input").focus ->
$("html, body").css "overflow-y","hidden"
$(document).on "scroll.stopped touchmove.stopped mousewheel.stopped", (event) ->
event.preventDefault()


$("input").blur ->
$("html, body").css "overflow-y","auto"
$(document).off "scroll.stopped touchmove.stopped mousewheel.stopped"

Javascript:

$("input").focus(function() {
$("html, body").css("overflow-y", "hidden");
$(document).on("scroll.stopped touchmove.stopped mousewheel.stopped", function(event) {
return event.preventDefault();
});
});


$("input").blur(function() {
$("html, body").css("overflow-y", "auto");
$(document).off("scroll.stopped touchmove.stopped mousewheel.stopped");
});
小开

不知道有没有人试过我的办法。这种方法可以应用于整个 body/html，但是毫无疑问，它可以应用于触发滚动事件的任何元素。

只要设置和取消滚动锁定，你需要。

var scrollLock = false;
var scrollMem = {left: 0, top: 0};


$(window).scroll(function(){
if (scrollLock) {
window.scrollTo(scrollMem.left, scrollMem.top);
} else {
scrollMem = {
left: self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
top: self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
};
}
});

下面是示例 JSFiddle

希望这个能帮到别人。

小开

要关闭滚动，请尝试以下操作:

var current = $(window).scrollTop();
$(window).scroll(function() {
$(window).scrollTop(current);
});

重置:

$(window).off('scroll');
小开

一行禁止滚动，包括鼠标中键。

$(document).scroll(function () { $(document).scrollTop(0); });

Edit : 无论如何都不需要 jQuery，下面和上面的普通 JS 一样(这意味着没有框架，只有 JavaScript) :

document.addEventListener('scroll', function () { this.documentElement.scrollTop = 0; this.body.scrollTop = 0; })

This. documentElement.scrollTop-standard

This. body. scrollTop-IE 兼容性

小开

如果只想通过键盘导航禁用滚动，可以重写 keydown 事件。

$(document).on('keydown', function(e){
e.preventDefault();
e.stopPropagation();
});
小开

有人发布了这个代码，有问题的时候没有保留滚动位置恢复。原因是人们倾向于将它应用于 html 和 body 或者只是 body，但是它应该只应用于 html。这样当恢复滚动位置时将保持:

$('html').css({
'overflow': 'hidden',
'height': '100%'
});

恢复:

$('html').css({
'overflow': 'auto',
'height': 'auto'
});
小开

您可以附加一个函数来滚动事件并防止其默认行为。

var $window = $(window);


$window.on("mousewheel DOMMouseScroll", onMouseWheel);


function onMouseWheel(e) {
e.preventDefault();
}

Https://jsfiddle.net/22clw9em/

小开

试试这个代码:

    $(function() {
// ...


var $body = $(document);
$body.bind('scroll', function() {
if ($body.scrollLeft() !== 0) {
$body.scrollLeft(0);
}
});


// ...
});
小开
  • 隐藏卷轴: $("body").css("overflow", "hidden");
  • 还原滚动条: $("body").css("overflow", "initial");
小开

我认为最好和干净的解决办法是:

window.addEventListener('scroll',() => {
var x = window.scrollX;
var y = window.scrollY;
window.scrollTo(x,y);
});

使用 jQuery:

$(window).on('scroll',() => {
var x = window.scrollX;
var y = window.scrollY;
window.scrollTo(x,y)
})

这些事件侦听器应该阻止滚动。 只要删除它们就可以重新启用滚动

小开

我使用下面的代码禁用滚动，它的工作正常

    $('html').css({
'overflow': 'hidden',
'height': '100%'
});

除了在我的 Android 平板电脑上，网址栏和顶部窗口标签仍然可见，当用户向上和向下滚动时，窗口也向上和向下滚动大约40px，并显示/隐藏网址栏和标签。 有没有办法防止这种情况并完全禁用滚动？

小开

如果要以编程方式禁用滚动，可以使用:

overflow: clip;

如果你想为用户禁用滚动，你可以使用:

overflow: hidden;

Https://developer.mozilla.org/en-us/docs/web/css/overflow

对 溢出属性的浏览器支持有所不同:

Https://caniuse.com/?search=overflow


提交答案