1

I am trying to add a smooth scroll to my website. Most of you think of a smooth scrolling animation when clicking on a button. But no! That's not what I want to achieve. When a user presses the key down, key upper or scrolls with the mouse wheel, I want to make a smooth animation to the point he scrolls to. I know it is possible. At this website, you can get a pure vanilla javascript code when you make a yearly subscription: http://www.smoothscroll.net/ . And I know that it works because I already saw it at other websites. My idea to achieve this by myself:

/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/*                                 S M O O T H  S C R O L L                                    */
/*/////////////////////////////////////////////////////////////////////////////////////////////*/

var keys = {37: 1, 38: 1, 39: 1, 40: 1};

function preventDefault(e) {
  e.preventDefault();
}

function preventDefaultForScrollKeys(e) {
  if (keys[e.keyCode]) {
    preventDefault(e);
    return false;
  }
}

var supportsPassive = false;
try {
  window.addEventListener("test", null, Object.defineProperty({}, 'passive', {
    get: function () { supportsPassive = true; }
  }));
} catch(e) {}

var wheelOpt = supportsPassive ? { passive: false } : false;
var wheelEvent = 'onwheel' in document.createElement('div') ? 'wheel' : 'mousewheel';

// call this to Disable
function disableScroll() {
  window.addEventListener('DOMMouseScroll', preventDefault, false); // older FF
  window.addEventListener(wheelEvent, preventDefault, wheelOpt); // modern desktop
  window.addEventListener('touchmove', preventDefault, wheelOpt); // mobile
  window.addEventListener('keydown', preventDefaultForScrollKeys, false);
}

// call this to Enable
function enableScroll() {
  window.removeEventListener('DOMMouseScroll', preventDefault, false);
  window.removeEventListener(wheelEvent, preventDefault, wheelOpt);
  window.removeEventListener('touchmove', preventDefault, wheelOpt);
  window.removeEventListener('keydown', preventDefaultForScrollKeys, false);
}

disableScroll();

This is a stackoverflow answer. You can find the answer here: https://stackoverflow.com/a/4770179/12419967. The Problem now: I need to find out how much the user scrolled and than I could scroll it via script. But how? Or is there another solution or library we can use?

matthias_h
  • 11,356
  • 9
  • 22
  • 40
Marius
  • 11
  • 2
  • [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) – Mechanic Apr 05 '20 at 17:51
  • @CaptainMhmdrz_A Can you provide a little example? As I prevent scrolling I am not sure how I should use this API. – Marius Apr 05 '20 at 18:11
  • You want how much did it scroll before the time you disabled scrolling? – Saadi Toumi Fouad Apr 05 '20 at 19:37
  • @SaymoinSam No, I know what he means. I searched for this so long. He prevents the mouse wheel scrolling and key up and down. Now. When the users scroll the mouse wheel he needs to find out how much the user scrolled down theoretically. But he couldn't scroll the page as scrolling is prevented. So he needs to find out the theoretical scroll. After this, he scrolls to the position where the user scrolled to theoretically with a smooth scrolling animation. – Marcus Derem Apr 06 '20 at 12:01
  • 1
    @MarcusDerem so it's all about customizing the default behaviour of scrolling?!! – Saadi Toumi Fouad Apr 06 '20 at 12:04
  • @SaymoinSam Yes, but that's important. You really feel a difference between a website with smooth scroll and a website which doesn't use it. And we all know. To win users make an impressive website, which is not like all the other websites. :) – Marcus Derem Apr 06 '20 at 12:22

0 Answers0