防止窗口滚动jquery

Prevent window scroll jquery

本文关键字：jquery 滚动 窗口      更新时间：2023-09-26

我正在用jquery开发一个选择菜单替代品。
首先，我必须通过将tabindex="0"添加到容器中来使新的选择菜单可聚焦。
然后，我禁用对原始选择菜单的焦点，并将焦点放在新的选择菜单上。当一个新的焦点，你按下向上和向下箭头的选项随之改变，但有一个大问题。当你按下箭头时，主体也会移动。
到目前为止，我尝试了所有这些解决方案，但都没有成功:

$(window).unbind('scroll');
$(document).unbind('scroll');
$('body').unbind('scroll');
$(window).unbind('keydown');
$(document).unbind('keydown');

查看这里的代码http://pastebin.com/pVNMqyui这段代码来自我即将发布的Ideal Forms http://code.google.com/p/idealforms的开发版本，支持键盘。

知道为什么这个不工作吗?

编辑:

解决!

找到答案在这个帖子jquery链接标签启用禁用

var disableScroll = function(e){
    if (e.keyCode === 40 || e.keyCode === 38) {
        e.preventDefault();
        return false;
    }
};
// And then...
events.focus: function(){ $(window).on('keydown', disableScroll); }
events.blur: function(){ $(window).off('keydown', disableScroll); }

它工作!

在keydown处理程序中，对于向上和向下键，像这样返回false:

'keydown' : function (e) {
    if (e.keyCode === 40) { // Down arrow
        that.events.moveOne('down');
    }
    if (e.keyCode === 38) { // Up arrow
        that.events.moveOne('up');
    }
    return false;
}

同时，要确保这个返回值被传播到浏览器的本地onkeydown，这取决于你使用的是哪种框架。

在这个帖子找到答案jquery链接标签启用禁用

var disableScroll = function(e){
    if (e.keyCode === 40 || e.keyCode === 38) {
        e.preventDefault();
        return false;
    }
};
// And then...
events.focus: function(){ $(window).on('keydown', disableScroll); }
events.blur: function(){ $(window).off('keydown', disableScroll); }

您需要取消箭头键的keydown事件。如果按了箭头键，则在.keydown()处理程序中使用e.preventDefault()或return false。

很简单。你甚至不需要jQuery。

jQuery: 

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

<body style="overflow: hidden">

添加样式:

<style>
 body {width:100%; height:100%; overflow:hidden, margin:0}
 html {width:100%; height:100%; overflow:hidden}
</style>

如果你想要绑定方向键，尝试如下:

$('body').keydown(function(e){
    e.preventDefult();
    if(e.keyCode == 37) // for left key
    {
        // implement focus functionality
    }
    if(e.keyCode == 38) // for up key
    {
        // implement focus functionality
    }
    if(e.keyCode == 39) // for right key
    {
        // implement focus functionality
    }
    if(e.keyCode == 40) // for doqn key
    {
        // implement focus functionality
    }
});

最好的方法是将body的溢出设置为hidden 

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

过程结束后，做相反的

`$("body").css("overflow", "hidden");
相关文章：