我正在使用scrollTo jQuery插件,想知道是否有可能通过Javascript暂时禁用窗口元素上的滚动?我想禁用滚动的原因是,当你滚动而scrollTo是动画,它变得非常难看;)
当然,我可以做$("body").css("overflow", "hidden");然后当动画停止时把它放回自动,但如果滚动条仍然可见但不活跃会更好。
我正在使用scrollTo jQuery插件,想知道是否有可能通过Javascript暂时禁用窗口元素上的滚动?我想禁用滚动的原因是,当你滚动而scrollTo是动画,它变得非常难看;)
当然,我可以做$("body").css("overflow", "hidden");然后当动画停止时把它放回自动,但如果滚动条仍然可见但不活跃会更好。
当前回答
在全局变量中存储滚动长度,并在需要时恢复它!
var sctollTop_length = 0;
function scroll_pause(){
sctollTop_length = $(window).scrollTop();
$("body").css("overflow", "hidden");
}
function scroll_resume(){
$("body").css("overflow", "auto");
$(window).scrollTop(sctollTop_length);
}
其他回答
根据你想要使用移除的滚动来实现什么,你可以只修复你想要移除滚动的元素(单击,或任何其他你想要临时禁用滚动的触发器)
我正在寻找一个“临时无滚动”的解决方案,这解决了我的需要
创建一个班级
.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)
});
我找到了一个更好,但有问题的方法,结合了sdleihssirhc的想法:
window.onscroll = function() {
window.scrollTo(window.scrollX, window.scrollY);
//Or
//window.scroll(window.scrollX, window.scrollY);
//Or Fallback
//window.scrollX=window.scrollX;
//window.scrollY=window.scrollY;
};
我没有测试它,但我稍后会编辑,让你们都知道。我有85%的把握它能在主流浏览器上运行。
对我来说,这并没有带来任何内容跳跃。
禁用滚动:
this.htmlBody = $('body')
this.scrollPos = document.documentElement.scrollTop
this.htmlBody.css('top', -this.scrollPos + 'px').addClass('disable-scroll')
重新启用滚动:
this.htmlBody.removeClass('disable-scroll')
$(window).scrollTop(this.scrollPos)
而CSS:
body.disable-scroll {
position: fixed;
width: 100%;
}
我在这里用了一个简单的技巧:
.no-scroll{
overflow: hidden;
}
let toggle_scrolling_state = () => {
element.classList.toggle("no-scroll");
}
然后当你想要停止滚动事件或…
我也有同样的问题,下面是我处理它的方法。
/* file.js */
var body = document.getElementsByTagName('body')[0];
//if window dont scroll
body.classList.add("no-scroll");
//if window scroll
body.classList.remove("no-scroll");
/* file.css */
.no-scroll{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
希望这对你有所帮助。