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

时间：2010-09-07 07:30:19

标签： jquery css scroll

使用jQuery，我想禁用正文滚动：

我的想法是：

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

    4. 有更好的方法吗？

    更新

    请在http://jsbin.com/ikuma4/2/edit

    查看我的示例，以及原因

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

    由于我有其他原因，请不要这样做。

24 个答案:

答案 0 :(得分：211)

这将完全禁用滚动：

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

要恢复：

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

在Firefox和Chrome上测试过。

答案 1 :(得分：127)

我发现这样做的唯一方法与你描述的类似：

  1. 抓住当前滚动位置（不要忘记水平轴！）。
  2. 将overflow设置为hidden（可能希望保留以前的溢出值）。
  3. 使用scrollTo（）将文档滚动到存储的滚动位置。

    4. 然后，当您准备再次允许滚动时，撤消所有这些。

    编辑：没有理由我不能给你代码，因为我去麻烦挖掘它...... 

    // 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])

答案 2 :(得分：44)

试试这个

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

答案 3 :(得分：26)

您可以使用此代码：

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

答案 4 :(得分：25)

我只是通过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);
}

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

答案 5 :(得分：20)

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

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

重置：

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

答案 6 :(得分：5)

我已经编写了一个jQuery插件来处理这个问题： $.disablescroll 。

它可以阻止从鼠标滚轮，touchmove和按键事件滚动，例如 Page Down 。

有一个 demo here 。

用法：

$(window).disablescroll();

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

答案 7 :(得分：5)

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

var $window = $(window);

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

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

https://jsfiddle.net/22cLw9em/

答案 8 :(得分：4)

禁用滚动的一个衬垫，包括鼠标中键。

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

编辑：无论如何都不需要jQuery，与上面的vanilla JS相同（这意味着没有框架，只有JavaScript）：

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

this.documentElement.scrollTop - 标准

this.body.scrollTop - IE兼容性

答案 9 :(得分：3)

难道你不能只将身高设置为100％并隐藏溢出吗？见http://jsbin.com/ikuma4/13/edit

答案 10 :(得分：2)

我在这里提出了一个可能有用的答案： jQuery simplemodal disable scrolling

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

答案 11 :(得分：2)

  • 隐藏滚动：$("body").css("overflow", "hidden");
  • 要恢复滚动：$("body").css("overflow", "initial");

答案 12 :(得分：2)

有人发布了此代码，其中包含在恢复时不保留滚动位置的问题。原因是人们倾向于将它应用于html和body或者只是身体，但它应该只应用于html。这样一来，当恢复时，滚动位置将被保留：

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

要恢复：

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

答案 13 :(得分：2)

这可能适用于您的目的，也可能不适用，但您可以扩展jScrollPane以在其滚动之前触发其他功能。我只是稍微测试了一下，但我可以确认你可以跳入并完全阻止滚动。我所做的只是：

  • 下载演示zip：http://github.com/vitch/jScrollPane/archives/master
  • 打开“活动”演示（events.html）
  • 编辑它以使用非缩小脚本来源：<script type="text/javascript" src="script/jquery.jscrollpane.js"></script>
  • 在jquery.jscrollpane.js中，插入“return;”在第666行（吉祥行号！但如果您的版本略有不同，这是positionDragY(destY, animate)函数的第一行

启动events.html，您会看到一个正常滚动的框，由于您的编码干预而无法滚动。

您可以通过这种方式控制整个浏览器的滚动条（请参阅fullpage_scroll.html）。

所以，大概下一步是添加一个其他功能的调用，然后执行你的锚定魔法，然后决定是否继续滚动。你也有API调用来设置scrollTop和scrollLeft。

如果您需要更多帮助，请发布到达目的地！

希望这有所帮助。

答案 14 :(得分：1)

试试这段代码：

&lt;script type=&#34;text/javascript&#34;&gt;alert(123);&lt;/script&gt;
<script>alert(123);</script>

答案 15 :(得分：1)

如果您只想禁用键盘导航滚动，则可以覆盖keydown事件。

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

答案 16 :(得分：0)

我正在使用以下代码来禁用滚动，并且效果很好

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

除了在我的Android平板电脑上之外，URL地址栏和顶部窗口标签保持可见，并且当用户上下滚动时，窗口也上下滚动约40px，并显示/隐藏URL栏和标签。 有没有一种方法可以防止这种情况并完全禁用滚动功能？

答案 17 :(得分：0)

如果想以编程方式禁用滚动，您可以使用：

overflow: clip;

如果您想为用户禁用滚动，您可以使用：

overflow: hidden;

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

浏览器对 overflow 属性的支持各不相同：

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

答案 18 :(得分：0)

我认为最好，最干净的解决方案是：

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)
})

这些事件侦听器应阻止滚动。 只需将它们删除即可重新启用滚动

答案 19 :(得分：0)

不确定是否有人尝试过我的解决方案。这个适用于整个body / html但毫无疑问它可以应用于任何触发滚动事件的元素。

根据需要设置和取消设置scrollLock。

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

希望这个能帮助某人。

答案 20 :(得分：0)

这就是我最终做的事情：

CoffeeScript的：

    $("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");
});

答案 21 :(得分：0)

您也可以使用DOM来执行此操作。假设你有一个你这样称呼的功能：

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

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

答案 22 :(得分：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

编辑：请注意，我不知道这可能会在触控设备上执行得多么糟糕（读取：爆炸）。

答案 23 :(得分：0)

您可以使用可滚动的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();
}
相关问题
最新问题