2

我建立了一个网站只是为了尝试一些我的想法并学习。我在firefox中测试时发现了一个问题。我做了一个滚动功能，当图像到达特定位置时滚动页面。图像通过箭头键移动。它在 IE9 和 Chrome 中运行良好，但在 Firefox 中，当我输入箭头键时页面会滚动。我认为这是因为箭头键上的向上翻页、向下翻页、主页和结束导航，但是如果我在 Firefox 中禁用箭头键导航，问题仍然存在。

滚动功能：

    function scrollPage() {
    if(xpos > scrollPosX[scrolledX + 1]) {  
        scrolledX++;
        window.scroll(scrollPosX[scrolledX],scrollPosY[scrolledY]);                 
    }
    if(xpos < scrollPosX[scrolledX] - ufoWidth) {   
        scrolledX--;
        window.scroll(scrollPosX[scrolledX],scrollPosY[scrolledY]);                 
    }   
    if(ypos > scrollPosY[scrolledY + 1]) {  
        scrolledY++;
        window.scroll(scrollPosX[scrolledX],scrollPosY[scrolledY]);                 
    }
    if(ypos < scrollPosY[scrolledY] - ufoHeight) {  
        scrolledY--;
        window.scroll(scrollPosX[scrolledX],scrollPosY[scrolledY]);                 
    }   

    info5.html('scrolledX: ' + scrolledX + '<br />scrolledY: ' + scrolledY + '<br />scrollPosX: ' + scrollPosX[scrolledX] + '<br />scrollPosY: ' + scrollPosY[scrolledY]);
    scrollLoop = setTimeout(scrollPage, 100);
}
  • xpos 和 ypos 是图像的左侧和顶部位置。
  • scrollPosX 和 scrollPosY 是包含要滚动到的位置的数组。
  • scrolledX 和 scrolledY 用于计算卷轴。

这是我上传的演示。完整代码请查阅页面来源： http: //www.mikeywebs.nl/

我希望有人能告诉我如何解决这个问题。也欢迎对我的代码进行一些评论，因为我还在学习。

谢谢。

4

1 回答 1

2

在您的演示代码中，没有什么可以阻止滚动事件触发。在内联 JS 代码的第 96 行附近试试这个：

$(document).keydown(function(e){
  e.preventDefault(); // Add this
  var code = e.keyCode; 
  switch (code) {

有关防止滚动的更多信息： 如何禁用滚动。

于 2013-06-04T13:44:29.290 回答