防止使用箭头键滚动答案

【问题标题】：Prevent scrolling with arrow keys防止使用箭头键滚动
【发布时间】：2011-03-13 14:08:35
【问题描述】：

如果其中的 iframe 聚焦，我如何防止 html 页面在按下箭头键时滚动？

我在 chrome 中遇到了这个错误

iframe 是专注的，我知道它是专注的。无论如何，父级滚动。

【问题讨论】：

你可以控制 iframe 中的内容吗？
是的，并且在同一个域中
IE 6+、FF3+、Chrome：默认情况下，它们都执行您刚才所说的操作。我单击 iframe 并按下箭头。 iframe 不会滚动页面。你想要什么？
not tested yet solution: CSS overscroll-behavior - IE、Safari(Mac/iOS) 不支持，但 WebKit 似乎会在未来实现它

标签： javascript html scroll

【解决方案1】：

iframe 文档中的以下代码将阻止其滚动：

document.onkeydown = function(evt) {
    evt = evt || window.event;
    var keyCode = evt.keyCode;
    if (keyCode >= 37 && keyCode <= 40) {
        return false;
    }
};

【讨论】：

这将阻止 iframe 滚动，但我想阻止页面滚动。
但是如果 iframe 被聚焦，箭头键如何影响父文档？
这是因为他专注的方式并没有发挥应有的作用。我的回答为他提供了解决该问题的代码。

【解决方案2】：

这段代码可以解决问题：

JavaScript

<script type="text/javascript">
  function focusOnIframe(iFrameID) {
    if (frames[iFrameID]!=undefined)
      frames[iFrameID].focus(); // Works in all browser, except Firefox
    else
      document.getElementById(iFrameID).focus();  // Works in Firefox
  }
</script>

HTML（示例）

<input type="button" id="setfocus" value="Set focus" onclick="focusOnIframe('myiframe')" />

<p>Bla<br />Bla<br />Bla<br />Bla<br />Bla<br /></p>  <!-- Just some filler -->

<iframe id="myiframe" src="yourpage.html"></iframe>

<p>Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br />Bla<br /></p>  <!-- Just some filler -->

我已经在 Firefox 3.6.6、Iron 5.0.380、Opera 10.60、IE 6 和 IE 8 中对其进行了测试。

【讨论】：

你明白这个问题涉及到滚动，对吧？不专注？
问题是你的注意力不集中，对吗？ IE。当 iframe 聚焦并使用箭头键时，它会滚动父级。上面的代码设置了焦点，父级不滚动。
当你使用上下键时，父级滚动，对吗？
从浏览文本并遇到类似问题：我认为问题在于页面元素上的滚动条“溢出”到正文。当您到达滚动内容的底部时，接下来会滚动正文。（这完全违反直觉，恕我直言）。
这并不能解决任何问题，问题仍然存在！

【解决方案3】：

这在 IE 之外有效：

window.top.document.onkeydown = function(evt) {
    evt = evt || window.event;
    var keyCode = evt.keyCode;
    if (keyCode >= 37 && keyCode <= 40) {
        return false;
    }
};

【讨论】：

【解决方案4】：

为无法访问加载到 iframe 的页面源的人回答：

我解决了 scroll 事件传播到父元素（主 html 文档）的问题，方法是将整个页面划分为 2 个 divs，使用 CSS position:fixed，第一个使用整个 html 页面（父级），第二个使用 iframe ，例如将屏幕分成两半并在分屏上看到 2 个浏览器窗口。或更灵活的升级：使第一个div的CSS width:100vw;height:100vh;（+微调CSS top|left|bottom|right）和第二个div通过CSS resize（resize:vertical|horizontal|both）或任何更智能的JS代码（例如@ 987654322@)

【讨论】：

【解决方案5】：

您可以使用以下代码防止使用箭头键滚动：

var objImage= null;

            function getKeyAndMove(e){

            var idtestor = document.getElementById('idPlacer2').value; 
                objImage=  document.getElementById(idtestor);               
                objImage.style.position='relative';


                var key_code=e.which||e.keyCode;
                switch(key_code){
                    case 37: //left arrow key
                        moveLeft();
e.preventDefault(); 
                        break;
                    case 38: //Up arrow key
                        moveUp();
e.preventDefault(); break;
                        break;
                    case 39: //right arrow key
                        moveRight();
e.preventDefault(); 
                        break;
                    case 40: //down arrow key
                        moveDown();
e.preventDefault(); break;
                        break;                      
                }
            }
            function moveLeft(){
                objImage.style.left=parseInt(objImage.style.left)-5 +'px';
window.scrollBy(-5, 0);
            }
            function moveUp(){
                objImage.style.top=parseInt(objImage.style.top)-5 +'px';
window.scrollBy(0, -5);
            }
            function moveRight(){
                objImage.style.left=parseInt(objImage.style.left)+5 +'px';
window.scrollBy(5, 0);
            }k`a`
            function moveDown(){
                objImage.style.top=parseInt(objImage.style.top)+5 +'px';
window.scrollBy(0, 5);
            }

【讨论】：