firefox中奇怪的JavaScript滚动

Strange JavaScript scroll in firefox

本文关键字:JavaScript 滚动 firefox      更新时间:2023-09-26

我建立了一个网站,只是为了尝试一些我的想法和学习。我在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/

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

谢谢。

在演示代码中,没有任何东西可以阻止scroll事件的触发。在内联JS代码的第96行附近试试:

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

在这里了解更多关于防止滚动的信息:如何禁用滚动