防止窗口滚动jQuery答案

【问题标题】：Prevent window scroll jquery防止窗口滚动jQuery
【发布时间】：2011-12-13 07:22:27
【问题描述】：

我正在 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 link tag enable disable找到答案

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); }

有效！

【问题讨论】：

也许这是event.preventDefault(); 在处理任何可能导致窗口滚动的事件的工作...
您应该将此添加为您自己问题的答案。

标签： javascript jquery scroll

【解决方案1】：

在您的 keydown 处理程序中，对于 up 和 down 键，像这样返回 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，具体取决于您使用的框架/方式。

【讨论】：

【解决方案2】：

在这篇帖子jquery link tag enable disable找到答案

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); }

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

它非常简单。你甚至不需要 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
    }
});

【讨论】：

这种方法的问题是滚动条消失，使内容发生变化，然后你必须以某种方式计算偏移量。这个我试过了，太复杂了，没必要……

【解决方案5】：

实现相同效果的最佳方法是将body的溢出设置为隐藏

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

在这个过程之后，做相反的事情

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

【讨论】：