How to solve this scrolling problem in Javascript?

41 views Asked by At

When I am going to scroll it has a delay and detection problem of scrollup and scrolldown classes. It works finly on iOS devices but not on android. On the android devices it works on Mozilla Firefox with some lags on not on the other browsers.

/**
 * @file
 * Global utilities.
 *
 */
(function (Drupal) {
  'use strict';
  Drupal.behaviors.bootstrap_barrio = {
    attach: function (context, settings) {
      var position = window.scrollY;
      window.addEventListener('scroll', function() {
        if (window.scrollY > 50) {
          document.querySelector('body').classList.add("scrolled");
        }
        else {
          document.querySelector('body').classList.remove("scrolled");
        }
        var scroll = window.scrollY;
        if (scroll > position) {
          document.querySelector('body').classList.add("scrolldown");
          document.querySelector('body').classList.remove("scrollup");
        } else {
          document.querySelector('body').classList.add("scrollup");
          document.querySelector('body').classList.remove("scrolldown");
        }
        position = scroll;
      });
      document.addEventListener('click', function (event) {
        // If the clicked element doesn't have the right selector, bail
        if (!event.target.matches('.dropdown-item a.dropdown-toggle')) return;
        // Don't follow the link
        event.preventDefault();
        toggle(event.target.next('ul'));
        event.stopPropagation();
      }, false);
      // Toggle element visibility
      var toggle = function (elem) {
        // If the element is visible, hide it
        if (window.getComputedStyle(elem).display === 'block') {
          hide(elem);
          return;
        }
        // Otherwise, show it
        show(elem);
      };
      var show = function (elem) {
        elem.style.display = 'block';
      };
      var hide = function (elem) {
        elem.style.display = 'none';
      };
    }
  };
}
)(Drupal);

I tried to remove aos scroll behavior, checked SCSS, etc.

0

There are 0 answers