-2

I try to make a reverse navigation. I show the page from the bottom with scrollTo. I want reverse the wheel movement, when the whell movement is down the page goes to the top.

The body has a fix height so I use:

 window.scrollTo(0, 2000);
2
  • How is that single line going to help you?
    – Alon Eitan
    Commented Apr 5, 2019 at 16:13
  • Hi Alon I know it. I try with some code but I don´t know how to make what I want. Only I show the way to show the page from the bottom
    – crismf
    Commented Apr 5, 2019 at 16:27

1 Answer 1

1

Prevent the default wheel event action and then programmatically do the exact reverse of it using window.scrollTo method. Where use deltaX and deltaY to get scroll amount and scrollX and scrollY positithe on to get current scroll position.

document.getElementById('div').addEventListener('wheel', function(e) {
  e.preventDefault()
  window.scrollTo(window.scrollX - e.deltaX, window.scrollY - e.deltaY)
});
body {
  height: 100vh;
}

#div {
  height: 2000px;
  overflow: auto;
}
<div id="div"></div>

Check polyfill for making stable across different browsers.

7
  • Sorry, but it doesn't work
    – crismf
    Commented Apr 5, 2019 at 16:23
  • @crismf : developer.mozilla.org/en-US/docs/Web/Events/wheel#Polyfill Commented Apr 5, 2019 at 16:28
  • 1
    @PranavCBalan It doesn't work on the window object on Chrome, I see lot's of errors referencing to this, but your solution does work on any other element in the DOM, so this answer works
    – Alon Eitan
    Commented Apr 5, 2019 at 16:33
  • @AlonEitan : ooops.... thanks mate.... let me update with body Commented Apr 5, 2019 at 16:40
  • @PranavCBalan can you show me a example? Can I use this solution maybe in a div?
    – crismf
    Commented Apr 5, 2019 at 16:41

Not the answer you're looking for? Browse other questions tagged or ask your own question.