How to execute a scroll command in jquery when what's being scrolled is within a fixed div set to overflow: scroll

Question

I want to execute a command in using jquery when a certain div (we'll call it div2) is being scrolled. This would be no problem except div2 is contained within another div (div1), and div1 has its height set to 100vh and its overflow set to scroll. In other words, jquery does not recognize anything as actually being scrolled as far as I can tell. When I tell jquery to perform the function when the whole window is scrolled, nothing happens, when I tell it to perform the function when div1 is being scrolled, nothing happens. When I tell it to perform the function when div2 is being scrolled, obviously nothing happens. How can I communicate that div1 is being scrolled in order to perform my function? Below is what I've tried so far. Any help would be greatly appreciated. Thank you in advance!

$(window).scroll(function(){

 var wScroll = $(this).scrollTop();
 
 alert("Hello");
 
 });

.div1{
 height:100vh;
 overflow: scroll;
 background: red;
}

.div2 {
 height: 5000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">
  <div class="div2">
    </div>
</div>

$(window).scroll(function(){ var wScroll = $(this).scrollTop(); alert("Hello"); }); — Evan Gladstone, Apr 09 '18 at 16:19
I've tried replacing "window" with the class names of my div and nothing happens — Evan Gladstone, Apr 09 '18 at 16:20
Is it `$('.div1').scroll(function(){ var wScroll = $(this).scrollTop(); alert("Hello"); })`? — deEr., Apr 09 '18 at 16:20
Here it is working. https://jsfiddle.net/owvxkdfr/4/. Or how do you expect.? — deEr., Apr 09 '18 at 16:25
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/168577/discussion-between-evan-gladstone-and-ajax). — Evan Gladstone, Apr 09 '18 at 16:39

score 0 · Accepted Answer · answered Apr 09 '18 at 16:40

0

Like this it works.

$('.div1').scroll(function(){

 var wScroll = $(this).scrollTop();
 
 alert("Hello");
 
 });

.div1{
 height:100vh;
 overflow: scroll;
 background: red;
}

.div2 {
 height: 5000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">
  <div class="div2">
    </div>
</div>

answered Apr 09 '18 at 16:40

deEr.

357
3
12

Do you have any trouble with attaching the listener. Try `$(window).load()`. https://stackoverflow.com/a/20068053/2569323. – deEr. Apr 09 '18 at 17:34

How to execute a scroll command in jquery when what's being scrolled is within a fixed div set to overflow: scroll

1 Answers1