Strange JavaScript scroll in firefox

Question

I have build a website just to try out some off my ideas and to learn. I found a problem when I tested it in firefox. I made a scroll function which scrolls the page when an image reach a specific position. the image moves by arrow keys. It works great in IE9 and Chrome, but in firefox the page scrolls when I enter an arrow key. I thought it was becuase of the the page up, page down, home and end navigation on the arrowKeys, but if I disable the navigation by arrowkeys in firefox, the problem still ocures.

The scroll function:

    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 and ypos are the left and top positions of the image.
scrollPosX and scrollPosY are arrays containing the positions to scroll to.
scrolledX and scrolledY are for counting the scrolls.

Here is a demo I uploaded. for the full code please lookup the page source: http://www.mikeywebs.nl/

I hope someone can tell me how to solve this. Some commentary on my code is also welcome cause im still learning.

Thanx.

score 2 · Accepted Answer · edited May 23 '17 at 12:11

2

In your demo's code, there is nothing preventing the scroll event to fire. Try this near line 96 in the inline JS code:

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

For further info here on SO about preventing scrolling: How to disable scrolling.

edited May 23 '17 at 12:11

Community

1
1

answered Jun 04 '13 at 13:44

rvidal

1,842
15
23

Thanks for your answer. Yes the scroll function works great but in firefox (maybe only in my firefox) when I use arrowkeys the page starts scrolling right away. when the image reach the right position the page still scrolls to the given positions. Does it happen when you run the demo in firefox too? – Zeebats Jun 04 '13 at 13:56
I tested your demo and it does scroll in Firefox 21 for Ubuntu. However, it does not scroll after making the change I suggested to you. – rvidal Jun 04 '13 at 14:07

Strange JavaScript scroll in firefox

1 Answers1