Use of Jquery on scroll event
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
Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.
