Contrib.social

Un-used "scroll" JS code in barrio.js

Open on Drupal.org →
Created on 16 July 2023, over 1 year ago
Updated 17 July 2023, over 1 year ago

Problem/Motivation

In barrio.js, there is this code:

      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;
      });

I could not figure out what it's being used for, if anything. I mean, I understand what the code does, but the scroll classes are not being used anywhere.

It was added in this commit and improved upon in this commit.

(Keep in mind, the above 2 commits refer to global.js, but this file was subsequently renamed to barrio.js in a later commit.

I suspect this code is not being used. If so, it would hugely beneficial to remove it since it adds high costs to browser rendering performance.

📌 Task
Status

Closed: works as designed

Version

5.5

Component

Code

Created by

🇹🇹Trinidad and Tobago xamount

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @xamount
  • Comment over 1 year ago →
    🇮🇳India mukeshMukesh12

    this code dynamically adds and removes CSS classes on the body element based on the user's scrolling behavior. It can be used to trigger visual changes or apply different styles to elements based on the scroll position and scrolling direction.

    this code will gives lot of help to Drupal themers without adding extra js code to achive different effects like fixed header, parallax effect etc.

    as a frontend guy I think this is helpful.

    Thanks

  • Status changed to Closed: works as designed over 1 year ago
  • Comment over 1 year ago →
    🇵🇪Peru hatuhay Lima
  • Status changed to Active over 1 year ago
  • Comment over 1 year ago →
    🇹🇹Trinidad and Tobago xamount

    This code is only applicable if you use the mentioned effects (fixed header, parallax effect etc).

    For sites using Bootstrap Barrio that do not use those effects, this code is 100% unused AND hinders browser performance.

    (Read up on layout thrashing. This code hurts the Interaction to Next Paint (INP) core web vitals metric, especially on low-end mobiles).

    It would have been better to have a enable/disable theme setting which would then load/not load this js if needed. For this reason, I am setting the status back to "Active". If you feel this issue is not important, then revert the status.

    As of right now, it's loaded unconditionally.

    Anyways, for the rest of us who choose not to use this code and would like to improve their INP metric slightly, you can ignore it like this.

    In YOURTHEME.info.yml

    libraries-override:
  bootstrap_barrio/global-styling:
    js:
      js/barrio.js: false
  • Status changed to Closed: works as designed over 1 year ago
  • Comment over 1 year ago →
    🇵🇪Peru hatuhay Lima
contrib.social Blog FAQ Discussions
Production build 0.71.5 2024