停用网页上的所有滚动 [英] Disable all scrolling on webpage

问题描述

我想知道是否可以停用网页上的所有滚动功能。

I would like to know if it is possible to disable all scrolling on a webpage.

我目前正在使用

html, body { overflow:hidden; }

问题是这不适用于iOS设备，如果你按住鼠标滚轮和拖动它你也可以滚动，所以它似乎是一个非常差的解决方案的问题

The issue is that this does not work on iOS devices and if you hold in the mouse wheel and drag it down you can also scroll, so it seems like a very poor solution to the problem

有一种方法来禁用所有设备上滚动的所有方法，然后重新 -

Is there a way to disable all methods of scrolling on all devices and then re-enable it?

推荐答案

我有这个完全相同的问题，我用下面的固定它：

I have had this exact same issue, i fixed it with the following;

var disableScroll = false;
var scrollPos = 0;
function stopScroll() {
    disableScroll = true;
    scrollPos = $(window).scrollTop();
}
function enableScroll() {
    disableScroll = false;
}
$(function(){
    $(window).bind('scroll', function(){
         if(disableScroll) $(window).scrollTop(scrollPos);
    });
    $(window).bind('touchmove', function(){
         $(window).trigger('scroll');
    });
});

触摸移动被绑定到窗口，因为触摸移动完成后才触发窗口滚动事件，因此这使得iOS上的体验更流畅！

the touch move is bound to the window as the window scroll event is not fired until touch move is completed, so this allows a much smoother experience on iOS!

这不是一个完美的解决方案，因为你可以抛出页面，但它会返回到所需的位置，抛出完成（因为窗口滚动事件将被触发）。这是因为iOS浏览器剥离了很多事件的性能。 setTimeout和setInterval函数在页面被抛出时不会触发，有一个循环也不是一个选项！

This isn't a perfect solution as you can 'throw' the page, but it will return to desired position when the throw has complete (as the window scroll event will then be fired). This is because iOS browsers strip out a lot of events for performance. also setTimeout and setInterval functions do not fire whilst the page is being thrown, having a loop isn't an option either!

请参阅这里 http://jsfiddle.net/8T26k/

这篇关于停用网页上的所有滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！