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

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


当前回答

下面的解决方案是基本的纯JavaScript(没有jQuery):

function disableScrolling(){
    var x=window.scrollX;
    var y=window.scrollY;
    window.onscroll=function(){window.scrollTo(x, y);};
}

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

其他回答

为了防止跳楼,我用了这个

export function toggleBodyScroll(disable) {
  if (!window.tempScrollTop) {
    window.tempScrollTop = window.pageYOffset; 
    // save the current position in a global variable so I can access again later

  }
  if (disable) {
    document.body.classList.add('disable-scroll');
    document.body.style.top = `-${window.tempScrollTop}px`;
  } else {
    document.body.classList.remove('disable-scroll');
    document.body.style.top = `0px`;
    window.scrollTo({top: window.tempScrollTop});
    window.tempScrollTop = 0;
  }
}

在CSS中

.disable-scroll {
  height: 100%;
  overflow: hidden;
  width: 100%;
  position: fixed;
}

基于Cheyenne Forbes的回答,以及我在这里通过fcalderan找到的答案:只是禁用滚动而不是隐藏它? 并修复了Hallodom的滚动条消失的问题

CSS:

.preventscroll{
    position: fixed;
    overflow-y:scroll;
}

JS:

whatever.onclick = function(){
    $('body').addClass('preventscroll');
}
whatevertoclose.onclick = function(){
    $('body').removeClass('preventscroll');
}

这段代码确实会跳到页面的顶部,但我认为fcalderan的代码有一个解决方案。

不,我不会使用事件处理,因为:

不是所有的事件都能保证到达身体, 选择文本并向下移动实际上是在滚动文档, 如果在分离某事物的阶段出了差错,你就完蛋了。

我已经咬了这个通过制作一个隐藏的文本区域复制粘贴动作,猜什么,页面滚动每当我做复制,因为内部我必须在我调用document.execCommand('copy')之前选择文本区域。

不管怎样,这就是我的方式,注意setTimeout():

document.body.setAttribute('style','overflow:hidden;');
// do your thing...
setTimeout(function(){document.body.setAttribute('style','overflow:visible;');}, 500);

当滚动条暂时消失时,会出现动量闪烁,但这是可以接受的。

根据你想要使用移除的滚动来实现什么,你可以只修复你想要移除滚动的元素(单击,或任何其他你想要临时禁用滚动的触发器)

我正在寻找一个“临时无滚动”的解决方案,这解决了我的需要

创建一个班级

.fixed{
    position: fixed;
}

然后用Jquery

var someTrigger = $('#trigger'); //a trigger button
var contentContainer = $('#content'); //element I want to temporarily remove scroll from

contentContainer.addClass('notfixed'); //make sure that the element has the "notfixed" class

//Something to trigger the fixed positioning. In this case we chose a button.
someTrigger.on('click', function(){

    if(contentContainer.hasClass('notfixed')){
        contentContainer.removeClass('notfixed').addClass('fixed');

    }else if(contentContainer.hasClass('fixed')){
        contentContainer.removeClass('fixed').addClass('notfixed');
    };
});

我发现这是一个非常简单的解决方案,适用于所有浏览器,也适用于便携式设备(如iphone,平板电脑等)。由于元素是临时固定的,所以没有滚动:)

注意!根据contentContainer元素的位置,你可能需要从左边调整它。这可以很容易地通过添加一个css左值的元素时,固定类是活跃的

contentContainer.css({
    'left': $(window).width() - contentContainer.width()/2 //This would result in a value that is the windows entire width minus the element we want to "center" divided by two (since it's only pushed from one side)
});

使用JavaScript启用以下CSS将有所帮助。我不如这里的其他人好,但这对我很有用。

body {
    position: fixed;
    overflow-y: scroll;
}