When using a div element with position fixed and overflow scroll, the window scroll event in JQuery may not be triggered as expected

Question

When using a div element with position fixed and overflow scroll, the window scroll event in JQuery may not be triggered as expected

What is the reason for window scroll not being detected with elements in position fixed, despite having the overflow: scroll; property in the CSS?

If the condition is as follows:

<!doctype html>
<html>

<head>
  <style>
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    
    #a {
      position: fixed;
      background: red;
      height: 100px;
      width: 100%;
      text-align: center;
    }
    
    #aa {
      display: inline-block;
    }
    
    #b {
      top: 100px;
      position: fixed;
      overflow: scroll;
      width: 100%;
      padding: 0;
      /* height is setted with JS but for simulate it's setted manually */
      height: 500px;
      -webkit-transition: top 0.3s;
    }
    
    #c {
      /* height is setted with JS */
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script>
    $("*").on("scroll", function(e) {
      console.log("scrolling");
    })
    $("window").on("scroll", function(e) {
      console.log("scrolling");
    })
  </script>
</head>

<body>

  <header>
    <div id="a">
      <div id="aa">
        <h1>Hello</h1>
      </div>
    </div>
  </header>



  <main>
    <div id="b">
      <div id="c">
        F&1W8xyaOkA1ksfM9Dp
        <br> q2%aKsbDUlE1@GvE4v
        <br> XKCMcpA4bxmGpZIPAT0
        <br> cxL0tQ5t7zt!b&rVNL!
        <br> v3@6LANuuQ^n1swb)6c
        <br> L6o&6llTkqLGOuh(oug
        <br> CoDDa76!bkDw2Hn%ZCX
        <br> uuGcqIr(bVPHR*^!v&y
        <br> Ld&q&Y9G@w5XZKZcARL
        <br> 5k1!eJmacWe5kJbDj!r
        <br> HTSRtSTAKCDEy2MjK*c
        <br> Nq^&cTlUcan&oSDNGtc
        <br> P%J(LRZHir7d7iPVfN7
        <br> chbGfzkrxI2eXvCszH2
        <br> yl1dMbEQ4ycI5R4U&1
        <br> 5h42cd8XxOCcGdk)fCw
        <br> mEniGshHPHsTSMV9Zi
        <br> )1Yk!&VrFlqt(pEOSl6
        <br> s!enwOf@7RCErVgfG0s
        <br> Rks!cx!Y(5ixDX()R
        <br> 7ZxOmEeJYmHcoQkv4BC
        <br> FneHbodv*wS)*Q7a*A&
        <br> 4T4!D*J5^V9L&UHoiB
        <br> fnHgaK!1D6Slm)TO&MF
        <br> fBV%%4)H0i6stle)EFg
        <br> *aa&w%D9aS@1NbO(GS9
        <br> b!zwIVJtv4Ihi!%6XGj
        <br> 34)fvxWYpB3Alovj^1)
        <br> 4HvY5MmeUaOaf&Kktl
        <br> 6zIdvB(@lTiXwQzgB^Y
        <br> HkcQ*U5xNl(E6z5@l
        <br> ByM6jeZjGl%2K7Wv!HM
        <br> 4OSC*HcGW9gJ@E%MS5E
        <br> kNZ9WdbpHx3gqecIjqn
        <br> vayBp^o7^8NdztFVySS
        <br> AO&diq^*Y3PnyEand!r
        <br> YgVu@GHQhxbCsH73I56
        <br> T^0KLQwScvig)okXwKN
        <br> G94(ScoX&U5XA9o1cgI
        <br> r&^xZLvawH)^1qETka0
        <br> LWHs%*TX!PBiPwPDsnt
        <br> QZTDpVCwwGyxCk7s6pd
        <br> 6NO8a8vpJmbf*Cc^%c2
        <br> zmkIrV@XJxaywe7f^V&
        <br> rREWV&3vrBdb(1wWTav
        <br> df*z83KfPilOJhQD8vP
        <br> AZil1GPzZxq5U6!SDJg
        <br> eoW6Q2gm1kDw251W(Nx
        <br> S66wLAW6X1(0zfQ5W2
        <br> mAs54R9q1inHMkU6(4E
      </div>
      
      
      <footer>
        <center><h2>Footer</h2></center>
      </footer>
      
    </div>
    
  </main>
  <nav>
    position fixed (left side with JS)
  </nav>
  <script>
      document.querySelectorAll("*").forEach(element => element.addEventListener("scroll", ({
      target
    }) => console.log('Scrolling ', target, target.id)));
  </script>
</body>

</html>

Why does querySelectorAll("*") log the scroll while JQuery does not? What is the solution to detecting scroll in the current layout using JQuery?

How can scrolling be detected with the current layout using JQuery at the beginning of the file?

Edit (for better understanding):

What method can be used to detect scrolling with the current layout in JQuery from the start of the file?

javascript html jquery css

Answer 1

Answer №1

The scroll event is not being detected for the window since the scrolling occurs within the div. Only the div is scrolling, not the window.

Your other code, which adds the scroll event listener to each element, is also not capturing the event because it is located in the head of the document before any elements are loaded.

To address this issue, I have relocated that section of your script to the bottom of the document.

<!doctype html>
<html>

  <head>
    <style>
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #a {
        position: fixed;
        background: red;
        height: 100px;
        width: 100%;
        text-align: center;
      }

      #aa {
        display: inline-block;
      }

      #b {
        top: 100px;
        position: fixed;
        overflow: scroll;
        width: 100%;
        padding: 0;
        /* height is setted with JS but for simulate it's setted manually */
        height: 500px;
        -webkit-transition: top 0.3s;
      }

      #c {
        /* height is setted with JS */
      }

    </style>
    <script src="https://code.jquery.com/jquery-3.6.1.js"></script>
    
  </head>

  <body>

    <header>
      <div id="a">
        <div id="aa">
          <h1>Hello</h1>
        </div>
      </div>
    </header>



    <main>
      <div id="b">
        <div id="c">
          F&1W8xyaOkA1ksfM9Dp
          <br> q2%aKsbDUlE1@GvE4v
          <br> XKCMcpA4bxmGpZIPAT0
          <br> cxL0tQ5t7zt!b&rVNL!
          <br> v3@6LANuuQ^n1swb)6c
          <br> L...
        </div>


        <footer>
          <center>
            <h2>Footer</h2>
          </center>
        </footer>

      </div>

    </main>
    <nav>
      position fixed (left side with JS)
    </nav>
    <script>
      $(window).on("scroll", function(e) {
        console.log("scrolling");
      })

    </script>
    <script>
      document.querySelectorAll("*").forEach(element => element.addEventListener("scroll", ({
        target
      }) => console.log('Scrolling ', target)));

    </script>
  </body>

</html>

Answer 2

The scroll event is not being detected for the window since the scrolling occurs within the div. Only the div is scrolling, not the window.

Your other code, which adds the scroll event listener to each element, is also not capturing the event because it is located in the head of the document before any elements are loaded.

To address this issue, I have relocated that section of your script to the bottom of the document.

<!doctype html>
<html>

  <head>
    <style>
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #a {
        position: fixed;
        background: red;
        height: 100px;
        width: 100%;
        text-align: center;
      }

      #aa {
        display: inline-block;
      }

      #b {
        top: 100px;
        position: fixed;
        overflow: scroll;
        width: 100%;
        padding: 0;
        /* height is setted with JS but for simulate it's setted manually */
        height: 500px;
        -webkit-transition: top 0.3s;
      }

      #c {
        /* height is setted with JS */
      }

    </style>
    <script src="https://code.jquery.com/jquery-3.6.1.js"></script>
    
  </head>

  <body>

    <header>
      <div id="a">
        <div id="aa">
          <h1>Hello</h1>
        </div>
      </div>
    </header>



    <main>
      <div id="b">
        <div id="c">
          F&1W8xyaOkA1ksfM9Dp
          <br> q2%aKsbDUlE1@GvE4v
          <br> XKCMcpA4bxmGpZIPAT0
          <br> cxL0tQ5t7zt!b&rVNL!
          <br> v3@6LANuuQ^n1swb)6c
          <br> L...
        </div>


        <footer>
          <center>
            <h2>Footer</h2>
          </center>
        </footer>

      </div>

    </main>
    <nav>
      position fixed (left side with JS)
    </nav>
    <script>
      $(window).on("scroll", function(e) {
        console.log("scrolling");
      })

    </script>
    <script>
      document.querySelectorAll("*").forEach(element => element.addEventListener("scroll", ({
        target
      }) => console.log('Scrolling ', target)));

    </script>
  </body>

</html>

When using a div element with position fixed and overflow scroll, the window scroll event in JQuery may not be triggered as expected

Answer №1

Similar questions

What is the best way to resize a Bootstrap 4 form to perfectly fit the screen width in mobile view?

Activate current event on newly added elements

Why does the data loaded from PHP using jQuery vanish suddenly?

jQuery sorting function is utilized to organize a table after its rows have been modified through an ajax

Prevent image element from overflowing in HTML

Troubleshooting Issue with Ionic's UI Router

Encountering issues with Monaco Editor's autocomplete functionality in React

Is there a way to arrange two columns in a horizontal line?

Creating a Sudoku puzzle grid with HTML and CSS - a step-by-step guide

Troubleshooting Issue: Vue.js and Firebase not synchronized after deleting document

The async-await status is resolved, however the ajax request is still pending

Examples of panel splitting using Ajax

The comparison between createElement() and AJAX response

What is the process for obtaining a descriptor for a JavaScript class constructor function?

After successfully uploading a file, refresh the file list using AngularJS, DropzoneJS, and JSON

Creating a responsive website that utilizes YAML and is optimized for extremely narrow screen widths

Inconsistencies with AJAX performance

What is the best way to empty an input field after adding an item to an array?

"Enhance your web development experience with the combination of best_in

How can Angular incorporate an external JavaScript library?