首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使用jQuery以编程方式禁用页面滚动

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

Stack Overflow用户
提问于 2010-09-07 15:30:19
回答 23查看 463.7K关注 0票数 167

使用jQuery,我想禁用滚动正文:

我的想法是:

  1. Set body{ overflow: hidden;}
  2. Capture当前scrollTop();/scrollLeft()
  3. 绑定到body scroll事件,将scrollTop/scrollLeft设置为捕获值。

有没有更好的方法?

更新:

请在http://jsbin.com/ikuma4/2/edit上查看我的示例以及原因

我知道有人会想“为什么他不直接在面板上使用position: fixed呢?”

请不要这样建议,因为我还有其他原因。

EN

回答 23

Stack Overflow用户

回答已采纳

发布于 2010-09-07 15:34:35

我找到的唯一方法类似于你所描述的:

  1. 抓取当前滚动位置(不要忘记水平轴!)。
  2. 将overflow设置为隐藏(可能希望保留以前的溢出值)。
  3. 使用scrollTo()将文档滚动到存储的滚动位置。

然后,当您准备好再次允许滚动时,撤消所有这些操作。

编辑:没有理由我不能给你代码,因为我费了好大劲才把它挖出来……

// 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])
票数 143
EN

Stack Overflow用户

发布于 2013-06-25 17:27:40

这将完全禁用滚动:

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

要恢复,请执行以下操作:

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

在Firefox和Chrome上进行了测试。

票数 246
EN

Stack Overflow用户

发布于 2014-06-20 16:07:33

尝尝这个

$('#element').on('scroll touchmove mousewheel', function(e){
  e.preventDefault();
  e.stopPropagation();
  return false;
})
票数 46
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/3656592

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档