我正在使用scrollTo jQuery插件,想知道是否有可能通过Javascript暂时禁用窗口元素上的滚动?我想禁用滚动的原因是,当你滚动而scrollTo是动画,它变得非常难看;)

当然,我可以做$("body").css("overflow", "hidden");然后当动画停止时把它放回自动,但如果滚动条仍然可见但不活跃会更好。


当前回答

使用Javascript函数切换overflowY,同时切换移动菜单的可见性。比如这个:

function handleClickMobileMenu() {
  document.body.style.overflowY = isMobileMenuOpen ? "hidden" : "scroll";
  //...
}

在打开和关闭移动菜单时调用该函数。 最好的用例是当你的移动菜单是完全视口区域。

其他回答

还有另一个解决方案!

而不是使用多个事件监听器和添加,停止和关闭它们,你可以只添加一次回调监听器,其中你可以在你的函数中共享事件,只在需要的时候调用preventDefault等等,甚至实现自己的事件优先级系统。

在我看来,取消事件是一个可怕的方法:/

相反,我使用position: fixed;上图:-scrollTop ();在下面。

演示:https://jsfiddle.net/w9w9hthy/5/

从我的jQuery弹出项目:https://github.com/seahorsepip/jPopup

//Freeze page content scrolling
function freeze() {
    if($("html").css("position") != "fixed") {
        var top = $("html").scrollTop() ? $("html").scrollTop() : $("body").scrollTop();
        if(window.innerWidth > $("html").width()) {
            $("html").css("overflow-y", "scroll");
        }
        $("html").css({"width": "100%", "height": "100%", "position": "fixed", "top": -top});
    }
}

//Unfreeze page content scrolling
function unfreeze() {
    if($("html").css("position") == "fixed") {
        $("html").css("position", "static");
        $("html, body").scrollTop(-parseInt($("html").css("top")));
        $("html").css({"position": "", "width": "", "height": "", "top": "", "overflow-y": ""});
    }
}

这段代码考虑了宽度、高度、滚动条和页面跳转问题。

上述代码可能解决的问题:

宽度,当设置位置固定的HTML元素宽度可以小于100% 高度,同上 滚动条,当设置位置固定时,页面内容不再有滚动条,即使它在水平页面跳转之前有滚动条 页面跳转,当设置位置固定时,页面滚动顶部不再有效,导致垂直页面跳转

如果任何人对上面的页面冻结/解冻代码有任何改进,请告诉我,这样我就可以将这些改进添加到我的项目中。

我在这里用了一个简单的技巧:

.no-scroll{
  overflow: hidden;
}

let toggle_scrolling_state = () => {
   element.classList.toggle("no-scroll");
}

然后当你想要停止滚动事件或…

网站我继承了,有一个滚动的链接。为了暂时禁用滚动单击特定按钮,这对我来说是有效的:

$(document).ready(function() {      
    $('button.class-name').click(function(event) {
        disableScroll();
        setTimeout(enableScroll, 500);  
    });
});


function disableScroll() {
    scrollTop =  window.pageYOffset || document.documentElement.scrollTop; 
    scrollLeft =  window.pageXOffset || document.documentElement.scrollLeft, 

    window.onscroll = function() { 
            window.scrollTo(scrollLeft, scrollTop); 
    };
}

function enableScroll() { 
    window.onscroll = function() {}; 
} 

我在这篇文章中找到了解决方案。在我的上下文中,我希望禁用垂直滚动,当我在一个

像这样=>

let scrollContainer = document.getElementById('scroll-container');
document.getElementById('scroll-container').addEventListener(
    "wheel",
    (event) => {
        event.preventDefault();
        scrollContainer.scrollLeft += event.deltaY;
    },
    {
        // allow preventDefault()
        passive: false
    }
);