search

vguillou / parallax-element

A Polymer element allowing to declaratively create simple vertical or horizontal parallax scrolling effects, working on desktop and mobile. It features built-in deactivation of the effect in browsers (IE) that do not fully support the CSS transformations leveraged to achieve the parallax scrolling.
MIT License
24 stars 2 forks source link

Up/down cursor and PageUp/PageDn don't seem to work #5

Closed OutsourcedGuru closed 8 years ago

OutsourcedGuru commented 8 years ago

In my particular implementation of the "real world" example I noticed that the mouse scrolling worked great but the up/down cursor keys and the page up/dn keys didn't do anything. I spent some time on this and now I think I've got a working solution for me. Feel free to roll this into parallax-element somewhere if you want to with the following caveat: the keycodes for page up and down aren't consistent across browsers. So a proper approach would be to find out which browser it is and then to use the correct keycodes on a per-browser basis. Since I don't care about other browsers for my vanity website I'm just coding it for my Mozilla-based browser.

This went into my index.html's header:

    <script>
    // translate into the parallax-element's scroller functionality.
    function pageScroll(vLines) {
      var scroller = document.querySelector('#parallax').scroller;
      scroller.scrollTop = scroller.scrollTop + vLines;
    }
    document.onkeydown = function(e) {
      e = e || event;
      switch(e.keyCode) {
        case 33: // page up
          pageScroll(-360);
          return false;
        case 34: // page down
          pageScroll(360);
          return false;
        case 38: // up cursor
          pageScroll(-36);
          return false;
        case 40: // down cursor
          pageScroll(36);
          return false;
      }
    }
    </script>

And my initial reference to the parallax-element gets decorated with an id tag like this: <parallax-element id="parallax">

And that's it. It now listens for up/down cursor and page up/dn and translates this into your scroller. Note that the numbers in the pageScroll() calls are positive or negative depending upon direction and I chose values which make my website scroll nicely. I'd suggest matching the up/down values and then multiplying those by ten for the page up/dn values as I've done.

OutsourcedGuru commented 8 years ago

In my latest version, I've added smoother scrolling for both up/down cursors and page up/dn buttons. I also moved pageScroll() into my app.js file. It's a nice, smooth scroll with either set of keys which—on the Mac at least—is nearly as smooth as the mouse wheel scrolling.

App.js

  app.pageScroll = function(vLines) {
    var scroller = document.querySelector('#parallax').scroller;
    scroller.scrollTop = scroller.scrollTop + vLines;
  };

index.html

  <script>
    // This functionality allows up/down cursors and pageup/pagedown to
    // translate into the parallax-element's scroller functionality.
    document.onkeydown = function(e) {
      e = e || event;
      switch(e.keyCode) {
        case 33: // page up - should review this for IE
          for (var i=0; i<41; i++) {  setTimeout(function() { app.pageScroll(-9); }, i * 6);  }
          return false;
        case 34: // page down - should review this for IE
          for (var i=0; i<41; i++) {  setTimeout(function() { app.pageScroll(9); }, i * 6);   }
          return false;
        case 38: // up cursor
          for (var i=0; i<6; i++) {   setTimeout(function() { app.pageScroll(-6); }, i * 6);  }
          return false;
        case 40: // down cursor
          for (var i=0; i<6; i++) {   setTimeout(function() { app.pageScroll(6); }, i * 6);   }
          return false;
      }
    }
  </script>
vguillou commented 8 years ago

This problem is typically CSS related, usually there is an overflow: hidden; or position: fixed; lying around in one of the containers.

I've noticed that this is the case for the <body> tag in your project (https://www.myjs.io/). Could you try to deactivate your keydown listener and remove this overflow: hidden;, see if that's the problem?

OutsourcedGuru commented 8 years ago

On development, I just adjusted app/styles/main.css

body, html {
  /*overflow: hidden;*/
  font: 100% / 1.5 Arial;
}

...and commented out the section in app/index.html

/* document.onkeydown = function(e) { ... ) */

But it still doesn't scroll with either cursor or page keys. I think the overflow setting comes from your original real world HTML file:

  body, html {
    overflow: hidden;
    font: 100% / 1.5 Arial;
  }

So of course I just kept that.

At the moment on my development site the body CSS has a commented-out overflow tag and I've re-enabled the onkeydown handler and the cursor scrolling works again with no side effects of overflow being turned off.

I've now reviewed main.css for any fixed position but I don't see any.

Ah, I can repeat the behavior on the original real world demo as seen here. Mouse wheel works and cursors/paging doesn't.

vguillou commented 8 years ago

You're right about the overflow, it indeed comes from the demo. This seems like a focus problem, as I can scroll with the keys without any problem once I have clicked on the page.

I will look into it when I find some time, thanks for the report. :+1:

OutsourcedGuru commented 8 years ago

Oh..., you're right! It's a keyboard focus problem, not necessarily something else. All we need to do is to put keyboard focus on the page onLoad() and that ought to work without the fuss. I think I'm going to keep my version because it's such a smooth scrolling feature now. But thanks.

document.getElementById("parallax").focus();

OutsourcedGuru commented 8 years ago

I'm working on my next scrolling parallax website, btw. In this case I'm using vertical sine wave backgrounds for the page elements (at the zero depth) with one half transparent. It's looking really awesome so far. It's taken much tweaking but I think I've got a good design for one resolution so far.