Skip to content
Fix Code Error

Use of Jquery on scroll event

July 17, 2021 by Code Error
Posted By: Anonymous

I am unable to show text in console.log when I scroll the page.

_x000D_

_x000D_

$("#idOfUl").on('scroll', function() {
  console.log('Event Fired');
});

_x000D_

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="idOfUl">
  <ul>
    <li>
      You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow
      property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when
      you want to have better control of the layout. The default value is visible.
    </li>

    <li>
      You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow
      property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when
      you want to have better control of the layout. The default value is visible.
    </li>

    <li>
      You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow
      property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when
      you want to have better control of the layout. The default value is visible.
    </li>

    <li>
      You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow
      property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when
      you want to have better control of the layout. The default value is visible.
    </li>

    <li>
      You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow
      property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when
      you want to have better control of the layout. The default value is visible.
    </li>


    <li>
      You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow
      property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when
      you want to have better control of the layout. The default value is visible.
    </li>
  </ul>


</div>

_x000D_

_x000D_

_x000D_

I am unable to show text in console.log when I scroll the page.

I am unable to show text in console.log when I scroll the page.

I am unable to show text in console.log when I scroll the page.

I am unable to show text in console.log when I scroll the page.

I am unable to show text in console.log when I scroll the page.

Solution

The element needs to be scrollable (fixed height with an overflow:scroll).

_x000D_

_x000D_

$("#idOfUl").scroll(function() {
  console.log('Event Fired');
});

_x000D_

#idOfUl {
  height: 100vh;
  overflow: scroll;
}

_x000D_

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="idOfUl">
  <ul>
    <li>
      You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow
      property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when
      you want to have better control of the layout. The default value is visible.
    </li>

    <li>
      You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow
      property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when
      you want to have better control of the layout. The default value is visible.
    </li>

    <li>
      You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow
      property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when
      you want to have better control of the layout. The default value is visible.
    </li>

    <li>
      You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow
      property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when
      you want to have better control of the layout. The default value is visible.
    </li>

    <li>
      You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow
      property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when
      you want to have better control of the layout. The default value is visible.
    </li>


    <li>
      You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow
      property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when
      you want to have better control of the layout. The default value is visible.
    </li>
  </ul>


</div>

_x000D_

_x000D_

_x000D_

Answered By: Anonymous

Related Articles

  • VueJS masonry layout
  • DataTable draw daterange from vaadin-date-picker in polymer
  • How can I pass a wct test while rearranging children spans…
  • render function or template not defined in component:…
  • How would I be able to multiple select and pass data in the…
  • How to prevent scrolling the whole page?
  • How can I add class active if the element click on the vue…
  • What is causing this broken animation/transition in a Vue.js…
  • How to access this variable from my store / state in my vue…
  • Scroll with arrow keys on dropdown - vuejs

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

Error in a simple Keras ANN MNIST data set

Next Post:

Get data remotely from another device with get

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Get code errors & solutions at akashmittal.com
© 2022 Fix Code Error