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

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

jquery css scroll

如何使用jQuery以编程方式禁用页面滚动,jquery,css,scroll,Jquery,Css,Scroll,使用jQuery，我想禁用正文的滚动：我的想法是： Setbody{overflow:hidden；} 捕获当前的scrollTop（）/scrollLeft（）绑定到body scroll事件，将scrollTop/scrollLeft设置为捕获的值有更好的办法吗更新：请看我的例子，以及原因，在我知道有人会想：“为什么他不在面板上使用position:fixed？” 请不要建议这样做，因为我还有其他原因。我发现这样做的唯一方法与您描述的类似：抓取当前滚动位置（不要忘记水平轴！）

使用jQuery，我想禁用正文的滚动：

我的想法是：

Set

body{overflow:hidden；}

捕获当前的

scrollTop（）/scrollLeft（）

绑定到body scroll事件，将scrollTop/scrollLeft设置为捕获的值

有更好的办法吗

更新：

请看我的例子，以及原因，在

我知道有人会想：“为什么他不在面板上使用

position:fixed

？”

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

我发现这样做的唯一方法与您描述的类似：

抓取当前滚动位置（不要忘记水平轴！）

将溢出设置为隐藏（可能希望保留以前的溢出值）

使用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])

这可能适用于您的目的，也可能不适用于您的目的，但您可以在它进行滚动之前扩展以启动其他功能。我只是测试了一下，但是我可以确认你可以跳入并完全阻止滚动。我所做的只是：

下载演示压缩文件：
打开“事件”演示（Events.html）
编辑它以使用非精简脚本源：
在jquery.jscrollpane.js中，在第666行（吉祥行号）插入一个“return；”，但如果您的版本略有不同，这是
```
positionDragY（destY，animate）
```
函数的第一行

启动events.html，您将看到一个正常的滚动框，由于您的编码干预，该框不会滚动

您可以通过这种方式控制整个浏览器的滚动条（请参阅fullpage_scroll.html）

因此，假设下一步是添加对其他函数的调用，该函数将启动并执行锚定魔法，然后决定是否继续滚动。您还可以使用API调用来设置scrollTop和scrollLeft

如果你想得到更多的帮助，就把你要去的地方贴出来

希望这能有所帮助。

你能不能将身高设置为100%并隐藏溢出？请参见

我在这里给出了一个可能有用的答案：

它显示了如何在不移动文本的情况下关闭滚动条。您可以忽略有关SimpleModel的部分。

您可以使用以下代码：

$("body").css("overflow", "hidden");

    $(function() { 
        // ...

        var $body = $(document);
        $body.bind('scroll', function() {
            if ($body.scrollLeft() !== 0) {
                $body.scrollLeft(0);
            }
        });

        // ...
    });

您可以使用可滚动的div来覆盖窗口，以防止页面上的内容滚动。而且，通过隐藏和显示，您可以锁定/解锁您的滚动条

这样做：

#scrollLock {
    width: 100%;
    height: 100%;
    position: fixed;
    overflow: scroll;
    opacity: 0;
    display:none
}

#scrollLock > div {
    height: 99999px;
}

function scrollLock(){
    $('#scrollLock').scrollTop('10000').show();
}

function scrollUnlock(){
    $('#scrollLock').hide();
}

function disable_scroll() {
document.body.style.overflow="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});
}

我假设
没有初始边距
请注意，虽然上述解决方案在大多数实际情况下都有效，但它不是确定的，因为它需要对页面进行进一步的自定义，例如，包含一个带有位置：fixed
的标题。让我们以一个示例来讨论这个特殊情况。假设
<body>
<div id="header">My fixedheader</div>
<!--- OTHER CONTENT -->
</body>

然后，应在函数lockScroll（）
和unlockScroll（）
中添加以下内容：
最后，注意一些可能的边距或填充的初始值。
对于有居中布局的人（通过边距：0 auto；
），这里是位置：固定的解决方案与@tfe建议的解决方案的组合
如果您遇到页面捕捉（由于滚动条显示/隐藏），请使用此解决方案
…加上
// un-lock scroll position
var $html = $('html').removeClass('modal-noscroll');
var scrollPosition = $html.data('scroll-position');
var marginTop = $html.data('margin-top');
$html.css('margin-top', marginTop);
window.scrollTo(scrollPosition[0], scrollPosition[1])

…最后是.modal noscorl
的CSS
.modal-noscroll
{
    position: fixed;
    overflow-y: scroll;
    width: 100%;
}

我想冒昧地说，这是一个比任何其他解决方案更合适的解决方案，但我还没有彻底测试它…：p

编辑：请注意，我不知道这在触摸设备上会有多糟糕（读：放大）。
这将完全禁用滚动：
$('html, body').css({
    overflow: 'hidden',
    height: '100%'
});

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

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

在Firefox和Chrome上进行了测试。
我已经编写了一个jQuery插件来处理这个问题：
它可以防止鼠标滚轮、触摸移动和按键事件（如翻页）的滚动
有一个
用法：
$(window).disablescroll();

// To re-enable scrolling:
$(window).disablescroll("undo");

您也可以使用DOM来执行此操作。假设您有一个如下调用的函数：
#scrollLock {
    width: 100%;
    height: 100%;
    position: fixed;
    overflow: scroll;
    opacity: 0;
    display:none
}

#scrollLock > div {
    height: 99999px;
}

function scrollLock(){
    $('#scrollLock').scrollTop('10000').show();
}

function scrollUnlock(){
    $('#scrollLock').hide();
}

function disable_scroll() {
document.body.style.overflow="hidden";
}

这就是它的全部！希望除了所有其他答案之外，这也能有所帮助！
试试这个
$('#element').on('scroll touchmove mousewheel', function(e){
  e.preventDefault();
  e.stopPropagation();
  return false;
})

这就是我最后做的：
咖啡脚本：
    $("input").focus ->
        $("html, body").css "overflow-y","hidden"
        $(document).on "scroll.stopped touchmove.stopped mousewheel.stopped", (event) ->
            event.preventDefault()

    $("input").blur ->
        $("html, body").css "overflow-y","auto"
        $(document).off "scroll.stopped touchmove.stopped mousewheel.stopped"

Javascript:
$("input").focus(function() {
 $("html, body").css("overflow-y", "hidden");
 $(document).on("scroll.stopped touchmove.stopped mousewheel.stopped", function(event) {
   return event.preventDefault();
 });
});

$("input").blur(function() {
 $("html, body").css("overflow-y", "auto");
 $(document).off("scroll.stopped touchmove.stopped mousewheel.stopped");
});

不确定是否有人试用过我的解决方案。这个解决方案适用于整个body/html，但毫无疑问，它可以应用于触发滚动事件的任何元素
只需根据需要设置和取消设置scrollLock
var scrollLock = false;
var scrollMem = {left: 0, top: 0};

$(window).scroll(function(){
    if (scrollLock) {
        window.scrollTo(scrollMem.left, scrollMem.top);
    } else {
        scrollMem = {
            left: self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
            top: self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        };
    }
});

下面是一个例子
希望这一条对某人有所帮助。
要关闭滚动，请尝试以下操作：
var current = $(window).scrollTop();
$(window).scroll(function() {
    $(window).scrollTop(current);
});

要重置：
$(window).off('scroll');

一个用于禁用滚动的行程序，包括鼠标中键
$(document).scroll(function () { $(document).scrollTop(0); });

编辑：无论如何都不需要jQuery，下面和上面在vanilla JS中一样（这意味着没有框架，只有JavaScript）：
this.documentElement.scrollTop-标准
this.body.scrollTop-IE兼容性
如果您只想禁用键盘导航滚动，您可以覆盖keydown事件
$(document).on('keydown', function(e){
    e.preventDefault();
    e.stopPropagation();
});

有人发布了此代码，该代码在还原时存在无法保留滚动位置的问题。原因是人们倾向于将其应用于html和正文或仅应用于正文，但它应仅应用于html。这样，还原时滚动位置将保持不变：
$('html').css({
    'overflow': 'hidden',
    'height': '100%'
});

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

var $window = $(window);

$window.on("mousewheel DOMMouseScroll", onMouseWheel);

function onMouseWheel(e) {
    e.preventDefault();
}

    $(function() { 
        // ...

        var $body = $(document);
        $body.bind('scroll', function() {
            if ($body.scrollLeft() !== 0) {
                $body.scrollLeft(0);
            }
        });

        // ...
    });

window.addEventListener('scroll',() => {
    var x = window.scrollX;
    var y = window.scrollY;
    window.scrollTo(x,y);
});

$(window).on('scroll',() => {
    var x = window.scrollX;
    var y = window.scrollY;
    window.scrollTo(x,y)
})

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

overflow: clip;

overflow: hidden;