Mixing
Event Listener doesn't see and cooperate with div#id element
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I need to check if user stops scrolling some element on website (stop scrolling using mouse wheel not website) so I write some function in native JS for that:
document.addEventListener("DOMContentLoaded", function(event) {
scroller();
});
function scroller(){
var scrolling_area = document.getElementById("scroll-area");
console.log(scrolling_area); //shows good div
scrolling_area.addEventListener('scroll', function (event) {
event.preventDefault();
clearTimeout(isScrolling);
isScrolling = setTimeout(function () {
console.log('User stops scrolling');
}, 66);
}, false);
}
<div id="scroll-area" style="background:#ccc; height:1000px"></div>function scroller(){
var scrolling_area = document.getElementById("scroll-area");
console.log(scrolling_area); //shows good div
scrolling_area.addEventListener('scroll', function (event) {
event.preventDefault();
clearTimeout(isScrolling);
isScrolling = setTimeout(function () {
console.log('User stops scrolling');
}, 66);
}, false);
}
First console.log() shows good div, also if I use window instead of #scrolling_area element everything works fine.
window.addEventListener('scroll', function (event) {...});
But when I'm trying to use my div element I can't see any results. I also tried use listener with and without preventDefault() function. Am I doing something wrong or the div#scrolling_area may cause some issues?
javascript addeventlistener
edited Jan 3 at 16:29
Sam
796924
asked Jan 3 at 14:14
ReynoldsReynolds
234
add a comment |
I need to check if user stops scrolling some element on website (stop scrolling using mouse wheel not website) so I write some function in native JS for that:
document.addEventListener("DOMContentLoaded", function(event) {
scroller();
});
function scroller(){
var scrolling_area = document.getElementById("scroll-area");
console.log(scrolling_area); //shows good div
scrolling_area.addEventListener('scroll', function (event) {
event.preventDefault();
clearTimeout(isScrolling);
isScrolling = setTimeout(function () {
console.log('User stops scrolling');
}, 66);
}, false);
}
<div id="scroll-area" style="background:#ccc; height:1000px"></div>function scroller(){
var scrolling_area = document.getElementById("scroll-area");
console.log(scrolling_area); //shows good div
scrolling_area.addEventListener('scroll', function (event) {
event.preventDefault();
clearTimeout(isScrolling);
isScrolling = setTimeout(function () {
console.log('User stops scrolling');
}, 66);
}, false);
}
First console.log() shows good div, also if I use window instead of #scrolling_area element everything works fine.
window.addEventListener('scroll', function (event) {...});
But when I'm trying to use my div element I can't see any results. I also tried use listener with and without preventDefault() function. Am I doing something wrong or the div#scrolling_area may cause some issues?
javascript addeventlistener
edited Jan 3 at 16:29
Sam
796924
asked Jan 3 at 14:14
ReynoldsReynolds
234
Do you have some HTML and CSS code to have a full example?
– Armel
Jan 3 at 14:16
Well, this is dynamicly genereated code, that shows d3.js's linechart so there's a lot of code. Element that i've try to attach are parent for every other element of chart (including valueline, grid, axes, ticks and pointers).
– Reynolds
Jan 3 at 14:28
Did you define 'isScrolling' somewhere earlier in the code? by the code you posted alone it would be undefined
– Jonas B
Jan 3 at 14:29
Yes, i've tried to define before function but effect was the same.
– Reynolds
Jan 3 at 14:38
Your scroll area is not scrollable.... You are scrolling the page, not the div.
– epascarello
Jan 3 at 19:41
add a comment |
I need to check if user stops scrolling some element on website (stop scrolling using mouse wheel not website) so I write some function in native JS for that:
document.addEventListener("DOMContentLoaded", function(event) {
scroller();
});
function scroller(){
var scrolling_area = document.getElementById("scroll-area");
console.log(scrolling_area); //shows good div
scrolling_area.addEventListener('scroll', function (event) {
event.preventDefault();
clearTimeout(isScrolling);
isScrolling = setTimeout(function () {
console.log('User stops scrolling');
}, 66);
}, false);
}
<div id="scroll-area" style="background:#ccc; height:1000px"></div>function scroller(){
var scrolling_area = document.getElementById("scroll-area");
console.log(scrolling_area); //shows good div
scrolling_area.addEventListener('scroll', function (event) {
event.preventDefault();
clearTimeout(isScrolling);
isScrolling = setTimeout(function () {
console.log('User stops scrolling');
}, 66);
}, false);
}
First console.log() shows good div, also if I use window instead of #scrolling_area element everything works fine.
window.addEventListener('scroll', function (event) {...});
But when I'm trying to use my div element I can't see any results. I also tried use listener with and without preventDefault() function. Am I doing something wrong or the div#scrolling_area may cause some issues?
javascript addeventlistener
edited Jan 3 at 16:29
Sam
796924
asked Jan 3 at 14:14
ReynoldsReynolds
234
I need to check if user stops scrolling some element on website (stop scrolling using mouse wheel not website) so I write some function in native JS for that:
document.addEventListener("DOMContentLoaded", function(event) {
scroller();
});
function scroller(){
var scrolling_area = document.getElementById("scroll-area");
console.log(scrolling_area); //shows good div
scrolling_area.addEventListener('scroll', function (event) {
event.preventDefault();
clearTimeout(isScrolling);
isScrolling = setTimeout(function () {
console.log('User stops scrolling');
}, 66);
}, false);
}
<div id="scroll-area" style="background:#ccc; height:1000px"></div>function scroller(){
var scrolling_area = document.getElementById("scroll-area");
console.log(scrolling_area); //shows good div
scrolling_area.addEventListener('scroll', function (event) {
event.preventDefault();
clearTimeout(isScrolling);
isScrolling = setTimeout(function () {
console.log('User stops scrolling');
}, 66);
}, false);
}
First console.log() shows good div, also if I use window instead of #scrolling_area element everything works fine.
window.addEventListener('scroll', function (event) {...});
But when I'm trying to use my div element I can't see any results. I also tried use listener with and without preventDefault() function. Am I doing something wrong or the div#scrolling_area may cause some issues?
document.addEventListener("DOMContentLoaded", function(event) {
scroller();
});
function scroller(){
var scrolling_area = document.getElementById("scroll-area");
console.log(scrolling_area); //shows good div
scrolling_area.addEventListener('scroll', function (event) {
event.preventDefault();
clearTimeout(isScrolling);
isScrolling = setTimeout(function () {
console.log('User stops scrolling');
}, 66);
}, false);
}
<div id="scroll-area" style="background:#ccc; height:1000px"></div>document.addEventListener("DOMContentLoaded", function(event) {
scroller();
});
function scroller(){
var scrolling_area = document.getElementById("scroll-area");
console.log(scrolling_area); //shows good div
scrolling_area.addEventListener('scroll', function (event) {
event.preventDefault();
clearTimeout(isScrolling);
isScrolling = setTimeout(function () {
console.log('User stops scrolling');
}, 66);
}, false);
}
<div id="scroll-area" style="background:#ccc; height:1000px"></div>javascript addeventlistener
javascript addeventlistener
edited Jan 3 at 16:29
Sam
796924
asked Jan 3 at 14:14
ReynoldsReynolds
234
edited Jan 3 at 16:29
Sam
796924
asked Jan 3 at 14:14
ReynoldsReynolds
234
edited Jan 3 at 16:29
Sam
796924
edited Jan 3 at 16:29
Sam
796924
edited Jan 3 at 16:29
Sam
796924
796924
asked Jan 3 at 14:14
ReynoldsReynolds
234
asked Jan 3 at 14:14
ReynoldsReynolds
234
asked Jan 3 at 14:14
ReynoldsReynolds
234
234
Do you have some HTML and CSS code to have a full example?
– Armel
Jan 3 at 14:16
Well, this is dynamicly genereated code, that shows d3.js's linechart so there's a lot of code. Element that i've try to attach are parent for every other element of chart (including valueline, grid, axes, ticks and pointers).
– Reynolds
Jan 3 at 14:28
Did you define 'isScrolling' somewhere earlier in the code? by the code you posted alone it would be undefined
– Jonas B
Jan 3 at 14:29
Yes, i've tried to define before function but effect was the same.
– Reynolds
Jan 3 at 14:38
Your scroll area is not scrollable.... You are scrolling the page, not the div.
– epascarello
Jan 3 at 19:41
add a comment |
Do you have some HTML and CSS code to have a full example?
– Armel
Jan 3 at 14:16
Well, this is dynamicly genereated code, that shows d3.js's linechart so there's a lot of code. Element that i've try to attach are parent for every other element of chart (including valueline, grid, axes, ticks and pointers).
– Reynolds
Jan 3 at 14:28
Did you define 'isScrolling' somewhere earlier in the code? by the code you posted alone it would be undefined
– Jonas B
Jan 3 at 14:29
Yes, i've tried to define before function but effect was the same.
– Reynolds
Jan 3 at 14:38
Your scroll area is not scrollable.... You are scrolling the page, not the div.
– epascarello
Jan 3 at 19:41
Do you have some HTML and CSS code to have a full example?
– Armel
Jan 3 at 14:16
Do you have some HTML and CSS code to have a full example?
– Armel
Jan 3 at 14:16
Well, this is dynamicly genereated code, that shows d3.js's linechart so there's a lot of code. Element that i've try to attach are parent for every other element of chart (including valueline, grid, axes, ticks and pointers).
– Reynolds
Jan 3 at 14:28
Well, this is dynamicly genereated code, that shows d3.js's linechart so there's a lot of code. Element that i've try to attach are parent for every other element of chart (including valueline, grid, axes, ticks and pointers).
– Reynolds
Jan 3 at 14:28
Did you define 'isScrolling' somewhere earlier in the code? by the code you posted alone it would be undefined
– Jonas B
Jan 3 at 14:29
Did you define 'isScrolling' somewhere earlier in the code? by the code you posted alone it would be undefined
– Jonas B
Jan 3 at 14:29
Yes, i've tried to define before function but effect was the same.
– Reynolds
Jan 3 at 14:38
Yes, i've tried to define before function but effect was the same.
– Reynolds
Jan 3 at 14:38
Your scroll area is not scrollable.... You are scrolling the page, not the div.
– epascarello
Jan 3 at 19:41
Your scroll area is not scrollable.... You are scrolling the page, not the div.
– epascarello
Jan 3 at 19:41
add a comment |
3 Answers
3
active
oldest
votes
This may not be everything you need to solve your issue as I know your code is larger than what you posted.
However, the reason the scroll event is not being fired on the scroll-area is because the scroll-area is not currently scrollable.
For the scroll-area to be scrollable (lets say vertically for this example), the height of its content needs to exceed the scroll-area in height.
Try putting dummy text i.e "lorem ipsum" text in the scroll-area (to be greater then the area itself) and setting a CSS value of the scroll-area to be overflow: scroll.
The scroll-area will be scrollable and therefore the scroll event will fire (on the scroll-area).
I have tested this and it works.
Note: The reason the scroll event can be detected on the window (in your code) is because the height of the content of the window (i.e the scroll-area and all other elements together) is greater than the height of the window itself so the window is therefore scrollable.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#scroll-area{
/*give the scroll-area a smaller height for this example*/
height:500px;
background:#ccc;
overflow: scroll;
}
</style>
<script>
//declare the interval variable here to avoid the error when 'clearing' the interval later.
var isScrolling;
document.addEventListener("DOMContentLoaded", function(event) {
scroller();
});
function scroller(){
var scrolling_area = document.getElementById("scroll-area");
console.log(scrolling_area); //shows good div
scrolling_area.addEventListener('scroll', function (event) {
event.preventDefault();
if(isScrolling != null){
clearTimeout(isScrolling);
}
isScrolling = setTimeout(function () {
//this prints now fine.
console.log('User stops scrolling');
}, 66);
}, false);
}
</script>
</head>
<body>
<div id="scroll-area">
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable
content of a page when looking at its layout. The point of using Lorem Ipsum is
that it has a more-or-less normal distribution of letters, as opposed to using
'Content here, content here', making it look like readable English. Many
desktop publishing packages and web page editors now use Lorem Ipsum as their
default model text, and a search for 'lorem ipsum' will uncover many web sites
still in their infancy. Various versions have evolved over the years, sometimes
by accident, sometimes on purpose (injected humour and the like).
</div>
</body>
</html>
answered Jan 3 at 17:17
SarahSarah
1,1571025
Yeah, you're right. My scrolling area needs to be more scrollable. Thanks for advice, now I know what I've done wrong.
– Reynolds
Jan 4 at 7:29
@Reynolds No probs :) Glad I helped :)
– Sarah
Jan 4 at 10:25
add a comment |
Try to attach the event listener to a parent div of div#scrolling_area. It may work
answered Jan 3 at 14:17
Dorian BDorian B
534
And there's a problem - div that i;ve tried to attach is the parent element.
– Reynolds
Jan 3 at 14:28
add a comment |
I don't see how it would matter, but you aren't declaring your isScrolling variable with the proper notation. Im not sure why your thing isn't working, but this seems to work for me:
html
<div class="item">
<h2>TOp</h2>
<div class="inner" id="inner">
<h1>HI!</h1>
<h1>HI</h1>
<h1>asdf</h1>
<h1>asdf</h1>
</div>
<h2>Bottom</h2>
</div>
JS
const inner = document.getElementById('inner');
let isScrolling = false;
inner.addEventListener('scroll', (e) => {
isScrolling = true;
let scrollCheck = setTimeout(function() {
isScrolling = false;
console.log("Checking is scrolling:: ", isScrolling);
}, 100);
});
CSS
.item {
overflow: scroll;
}
.inner {
height: 50px;
overflow: scroll;
}
answered Jan 3 at 17:10
PytthPytth
2,1061318
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54024029%2fevent-listener-doesnt-see-and-cooperate-with-divid-element%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
This may not be everything you need to solve your issue as I know your code is larger than what you posted.
However, the reason the scroll event is not being fired on the scroll-area is because the scroll-area is not currently scrollable.
For the scroll-area to be scrollable (lets say vertically for this example), the height of its content needs to exceed the scroll-area in height.
Try putting dummy text i.e "lorem ipsum" text in the scroll-area (to be greater then the area itself) and setting a CSS value of the scroll-area to be overflow: scroll.
The scroll-area will be scrollable and therefore the scroll event will fire (on the scroll-area).
I have tested this and it works.
Note: The reason the scroll event can be detected on the window (in your code) is because the height of the content of the window (i.e the scroll-area and all other elements together) is greater than the height of the window itself so the window is therefore scrollable.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#scroll-area{
/*give the scroll-area a smaller height for this example*/
height:500px;
background:#ccc;
overflow: scroll;
}
</style>
<script>
//declare the interval variable here to avoid the error when 'clearing' the interval later.
var isScrolling;
document.addEventListener("DOMContentLoaded", function(event) {
scroller();
});
function scroller(){
var scrolling_area = document.getElementById("scroll-area");
console.log(scrolling_area); //shows good div
scrolling_area.addEventListener('scroll', function (event) {
event.preventDefault();
if(isScrolling != null){
clearTimeout(isScrolling);
}
isScrolling = setTimeout(function () {
//this prints now fine.
console.log('User stops scrolling');
}, 66);
}, false);
}
</script>
</head>
<body>
<div id="scroll-area">
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable
content of a page when looking at its layout. The point of using Lorem Ipsum is
that it has a more-or-less normal distribution of letters, as opposed to using
'Content here, content here', making it look like readable English. Many
desktop publishing packages and web page editors now use Lorem Ipsum as their
default model text, and a search for 'lorem ipsum' will uncover many web sites
still in their infancy. Various versions have evolved over the years, sometimes
by accident, sometimes on purpose (injected humour and the like).
</div>
</body>
</html>
answered Jan 3 at 17:17
SarahSarah
1,1571025
Yeah, you're right. My scrolling area needs to be more scrollable. Thanks for advice, now I know what I've done wrong.
– Reynolds
Jan 4 at 7:29
@Reynolds No probs :) Glad I helped :)
– Sarah
Jan 4 at 10:25
add a comment |
This may not be everything you need to solve your issue as I know your code is larger than what you posted.
However, the reason the scroll event is not being fired on the scroll-area is because the scroll-area is not currently scrollable.
For the scroll-area to be scrollable (lets say vertically for this example), the height of its content needs to exceed the scroll-area in height.
Try putting dummy text i.e "lorem ipsum" text in the scroll-area (to be greater then the area itself) and setting a CSS value of the scroll-area to be overflow: scroll.
The scroll-area will be scrollable and therefore the scroll event will fire (on the scroll-area).
I have tested this and it works.
Note: The reason the scroll event can be detected on the window (in your code) is because the height of the content of the window (i.e the scroll-area and all other elements together) is greater than the height of the window itself so the window is therefore scrollable.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#scroll-area{
/*give the scroll-area a smaller height for this example*/
height:500px;
background:#ccc;
overflow: scroll;
}
</style>
<script>
//declare the interval variable here to avoid the error when 'clearing' the interval later.
var isScrolling;
document.addEventListener("DOMContentLoaded", function(event) {
scroller();
});
function scroller(){
var scrolling_area = document.getElementById("scroll-area");
console.log(scrolling_area); //shows good div
scrolling_area.addEventListener('scroll', function (event) {
event.preventDefault();
if(isScrolling != null){
clearTimeout(isScrolling);
}
isScrolling = setTimeout(function () {
//this prints now fine.
console.log('User stops scrolling');
}, 66);
}, false);
}
</script>
</head>
<body>
<div id="scroll-area">
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable
content of a page when looking at its layout. The point of using Lorem Ipsum is
that it has a more-or-less normal distribution of letters, as opposed to using
'Content here, content here', making it look like readable English. Many
desktop publishing packages and web page editors now use Lorem Ipsum as their
default model text, and a search for 'lorem ipsum' will uncover many web sites
still in their infancy. Various versions have evolved over the years, sometimes
by accident, sometimes on purpose (injected humour and the like).
</div>
</body>
</html>
answered Jan 3 at 17:17
SarahSarah
1,1571025
Yeah, you're right. My scrolling area needs to be more scrollable. Thanks for advice, now I know what I've done wrong.
– Reynolds
Jan 4 at 7:29
@Reynolds No probs :) Glad I helped :)
– Sarah
Jan 4 at 10:25
add a comment |
This may not be everything you need to solve your issue as I know your code is larger than what you posted.
However, the reason the scroll event is not being fired on the scroll-area is because the scroll-area is not currently scrollable.
For the scroll-area to be scrollable (lets say vertically for this example), the height of its content needs to exceed the scroll-area in height.
Try putting dummy text i.e "lorem ipsum" text in the scroll-area (to be greater then the area itself) and setting a CSS value of the scroll-area to be overflow: scroll.
The scroll-area will be scrollable and therefore the scroll event will fire (on the scroll-area).
I have tested this and it works.
Note: The reason the scroll event can be detected on the window (in your code) is because the height of the content of the window (i.e the scroll-area and all other elements together) is greater than the height of the window itself so the window is therefore scrollable.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#scroll-area{
/*give the scroll-area a smaller height for this example*/
height:500px;
background:#ccc;
overflow: scroll;
}
</style>
<script>
//declare the interval variable here to avoid the error when 'clearing' the interval later.
var isScrolling;
document.addEventListener("DOMContentLoaded", function(event) {
scroller();
});
function scroller(){
var scrolling_area = document.getElementById("scroll-area");
console.log(scrolling_area); //shows good div
scrolling_area.addEventListener('scroll', function (event) {
event.preventDefault();
if(isScrolling != null){
clearTimeout(isScrolling);
}
isScrolling = setTimeout(function () {
//this prints now fine.
console.log('User stops scrolling');
}, 66);
}, false);
}
</script>
</head>
<body>
<div id="scroll-area">
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable
content of a page when looking at its layout. The point of using Lorem Ipsum is
that it has a more-or-less normal distribution of letters, as opposed to using
'Content here, content here', making it look like readable English. Many
desktop publishing packages and web page editors now use Lorem Ipsum as their
default model text, and a search for 'lorem ipsum' will uncover many web sites
still in their infancy. Various versions have evolved over the years, sometimes
by accident, sometimes on purpose (injected humour and the like).
</div>
</body>
</html>
answered Jan 3 at 17:17
SarahSarah
1,1571025
This may not be everything you need to solve your issue as I know your code is larger than what you posted.
However, the reason the scroll event is not being fired on the scroll-area is because the scroll-area is not currently scrollable.
For the scroll-area to be scrollable (lets say vertically for this example), the height of its content needs to exceed the scroll-area in height.
Try putting dummy text i.e "lorem ipsum" text in the scroll-area (to be greater then the area itself) and setting a CSS value of the scroll-area to be overflow: scroll.
The scroll-area will be scrollable and therefore the scroll event will fire (on the scroll-area).
I have tested this and it works.
Note: The reason the scroll event can be detected on the window (in your code) is because the height of the content of the window (i.e the scroll-area and all other elements together) is greater than the height of the window itself so the window is therefore scrollable.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#scroll-area{
/*give the scroll-area a smaller height for this example*/
height:500px;
background:#ccc;
overflow: scroll;
}
</style>
<script>
//declare the interval variable here to avoid the error when 'clearing' the interval later.
var isScrolling;
document.addEventListener("DOMContentLoaded", function(event) {
scroller();
});
function scroller(){
var scrolling_area = document.getElementById("scroll-area");
console.log(scrolling_area); //shows good div
scrolling_area.addEventListener('scroll', function (event) {
event.preventDefault();
if(isScrolling != null){
clearTimeout(isScrolling);
}
isScrolling = setTimeout(function () {
//this prints now fine.
console.log('User stops scrolling');
}, 66);
}, false);
}
</script>
</head>
<body>
<div id="scroll-area">
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable
content of a page when looking at its layout. The point of using Lorem Ipsum is
that it has a more-or-less normal distribution of letters, as opposed to using
'Content here, content here', making it look like readable English. Many
desktop publishing packages and web page editors now use Lorem Ipsum as their
default model text, and a search for 'lorem ipsum' will uncover many web sites
still in their infancy. Various versions have evolved over the years, sometimes
by accident, sometimes on purpose (injected humour and the like).
</div>
</body>
</html>
answered Jan 3 at 17:17
SarahSarah
1,1571025
edited Jan 3 at 17:28
answered Jan 3 at 17:17
SarahSarah
1,1571025
answered Jan 3 at 17:17
SarahSarah
1,1571025
answered Jan 3 at 17:17
SarahSarah
1,1571025
1,1571025
Yeah, you're right. My scrolling area needs to be more scrollable. Thanks for advice, now I know what I've done wrong.
– Reynolds
Jan 4 at 7:29
@Reynolds No probs :) Glad I helped :)
– Sarah
Jan 4 at 10:25
add a comment |
Yeah, you're right. My scrolling area needs to be more scrollable. Thanks for advice, now I know what I've done wrong.
– Reynolds
Jan 4 at 7:29
@Reynolds No probs :) Glad I helped :)
– Sarah
Jan 4 at 10:25
Yeah, you're right. My scrolling area needs to be more scrollable. Thanks for advice, now I know what I've done wrong.
– Reynolds
Jan 4 at 7:29
Yeah, you're right. My scrolling area needs to be more scrollable. Thanks for advice, now I know what I've done wrong.
– Reynolds
Jan 4 at 7:29
@Reynolds No probs :) Glad I helped :)
– Sarah
Jan 4 at 10:25
@Reynolds No probs :) Glad I helped :)
– Sarah
Jan 4 at 10:25
add a comment |
Try to attach the event listener to a parent div of div#scrolling_area. It may work
answered Jan 3 at 14:17
Dorian BDorian B
534
And there's a problem - div that i;ve tried to attach is the parent element.
– Reynolds
Jan 3 at 14:28
add a comment |
Try to attach the event listener to a parent div of div#scrolling_area. It may work
answered Jan 3 at 14:17
Dorian BDorian B
534
And there's a problem - div that i;ve tried to attach is the parent element.
– Reynolds
Jan 3 at 14:28
add a comment |
Try to attach the event listener to a parent div of div#scrolling_area. It may work
answered Jan 3 at 14:17
Dorian BDorian B
534
Try to attach the event listener to a parent div of div#scrolling_area. It may work
answered Jan 3 at 14:17
Dorian BDorian B
534
answered Jan 3 at 14:17
Dorian BDorian B
534
answered Jan 3 at 14:17
Dorian BDorian B
534
answered Jan 3 at 14:17
Dorian BDorian B
534
534
And there's a problem - div that i;ve tried to attach is the parent element.
– Reynolds
Jan 3 at 14:28
add a comment |
And there's a problem - div that i;ve tried to attach is the parent element.
– Reynolds
Jan 3 at 14:28
And there's a problem - div that i;ve tried to attach is the parent element.
– Reynolds
Jan 3 at 14:28
And there's a problem - div that i;ve tried to attach is the parent element.
– Reynolds
Jan 3 at 14:28
add a comment |
I don't see how it would matter, but you aren't declaring your isScrolling variable with the proper notation. Im not sure why your thing isn't working, but this seems to work for me:
html
<div class="item">
<h2>TOp</h2>
<div class="inner" id="inner">
<h1>HI!</h1>
<h1>HI</h1>
<h1>asdf</h1>
<h1>asdf</h1>
</div>
<h2>Bottom</h2>
</div>
JS
const inner = document.getElementById('inner');
let isScrolling = false;
inner.addEventListener('scroll', (e) => {
isScrolling = true;
let scrollCheck = setTimeout(function() {
isScrolling = false;
console.log("Checking is scrolling:: ", isScrolling);
}, 100);
});
CSS
.item {
overflow: scroll;
}
.inner {
height: 50px;
overflow: scroll;
}
answered Jan 3 at 17:10
PytthPytth
2,1061318
add a comment |
I don't see how it would matter, but you aren't declaring your isScrolling variable with the proper notation. Im not sure why your thing isn't working, but this seems to work for me:
html
<div class="item">
<h2>TOp</h2>
<div class="inner" id="inner">
<h1>HI!</h1>
<h1>HI</h1>
<h1>asdf</h1>
<h1>asdf</h1>
</div>
<h2>Bottom</h2>
</div>
JS
const inner = document.getElementById('inner');
let isScrolling = false;
inner.addEventListener('scroll', (e) => {
isScrolling = true;
let scrollCheck = setTimeout(function() {
isScrolling = false;
console.log("Checking is scrolling:: ", isScrolling);
}, 100);
});
CSS
.item {
overflow: scroll;
}
.inner {
height: 50px;
overflow: scroll;
}
answered Jan 3 at 17:10
PytthPytth
2,1061318
add a comment |
I don't see how it would matter, but you aren't declaring your isScrolling variable with the proper notation. Im not sure why your thing isn't working, but this seems to work for me:
html
<div class="item">
<h2>TOp</h2>
<div class="inner" id="inner">
<h1>HI!</h1>
<h1>HI</h1>
<h1>asdf</h1>
<h1>asdf</h1>
</div>
<h2>Bottom</h2>
</div>
JS
const inner = document.getElementById('inner');
let isScrolling = false;
inner.addEventListener('scroll', (e) => {
isScrolling = true;
let scrollCheck = setTimeout(function() {
isScrolling = false;
console.log("Checking is scrolling:: ", isScrolling);
}, 100);
});
CSS
.item {
overflow: scroll;
}
.inner {
height: 50px;
overflow: scroll;
}
answered Jan 3 at 17:10
PytthPytth
2,1061318
I don't see how it would matter, but you aren't declaring your isScrolling variable with the proper notation. Im not sure why your thing isn't working, but this seems to work for me:
html
<div class="item">
<h2>TOp</h2>
<div class="inner" id="inner">
<h1>HI!</h1>
<h1>HI</h1>
<h1>asdf</h1>
<h1>asdf</h1>
</div>
<h2>Bottom</h2>
</div>
JS
const inner = document.getElementById('inner');
let isScrolling = false;
inner.addEventListener('scroll', (e) => {
isScrolling = true;
let scrollCheck = setTimeout(function() {
isScrolling = false;
console.log("Checking is scrolling:: ", isScrolling);
}, 100);
});
CSS
.item {
overflow: scroll;
}
.inner {
height: 50px;
overflow: scroll;
}
answered Jan 3 at 17:10
PytthPytth
2,1061318
answered Jan 3 at 17:10
PytthPytth
2,1061318
answered Jan 3 at 17:10
PytthPytth
2,1061318
answered Jan 3 at 17:10
PytthPytth
2,1061318
2,1061318
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54024029%2fevent-listener-doesnt-see-and-cooperate-with-divid-element%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Do you have some HTML and CSS code to have a full example?
– Armel
Jan 3 at 14:16
Well, this is dynamicly genereated code, that shows d3.js's linechart so there's a lot of code. Element that i've try to attach are parent for every other element of chart (including valueline, grid, axes, ticks and pointers).
– Reynolds
Jan 3 at 14:28
Did you define 'isScrolling' somewhere earlier in the code? by the code you posted alone it would be undefined
– Jonas B
Jan 3 at 14:29
Yes, i've tried to define before function but effect was the same.
– Reynolds
Jan 3 at 14:38
Your scroll area is not scrollable.... You are scrolling the page, not the div.
– epascarello
Jan 3 at 19:41