Hai*_*ood 152 css jquery scroll
使用jQuery,我想禁用正文的滚动:
我的想法是:
body{ overflow: hidden;} scrollTop();/scrollLeft() 有没有更好的办法？
更新:
请参阅http://jsbin.com/ikuma4/2/edit,查看我的示例,以及原因
我知道有人会想"为什么他不只是position: fixed在面板上使用？".
由于我有其他原因,请不要这样做.
git*_*rik 222
这将完全禁用滚动:
$('html, body').css({
overflow: 'hidden',
height: '100%'
});
恢复:
$('html, body').css({
overflow: 'auto',
height: 'auto'
});
在Firefox和Chrome上测试过它.
tfe*_*tfe 131
我发现这样做的唯一方法与你描述的类似:
然后,当您准备再次允许滚动时,撤消所有这些.
编辑:没有理由我不能给你代码,因为我去麻烦挖掘它...
// 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])
小智 43
试试这个
$('#element').on('scroll touchmove mousewheel', function(e){
e.preventDefault();
e.stopPropagation();
return false;
})
mr.*_*ush 26
你可以使用这段代码:
$("body").css("overflow", "hidden");
Jea*_*ean 26
我只是通过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);
}
最后,为边距或填充处理一些可能的初始值.
Pat*_*der 21
要关闭滚动,请尝试以下操作:
var current = $(window).scrollTop();
$(window).scroll(function() {
$(window).scrollTop(current);
});
重置:
$(window).off('scroll');
我写了一个jQuery插件来处理这个问题:$ .disablescroll.
它可以防止滚动鼠标滚轮,touchmove和按键事件,例如Page Down.
这里有一个演示.
用法:
$(window).disablescroll();
// To re-enable scrolling:
$(window).disablescroll("undo");
一种禁用滚动的衬垫，包括鼠标中键。
$(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 兼容性
您可以附加一个函数来滚动事件并防止其默认行为.
var $window = $(window);
$window.on("mousewheel DOMMouseScroll", onMouseWheel);
function onMouseWheel(e) {
e.preventDefault();
}
https://jsfiddle.net/22cLw9em/