J'ai besoin de vérifier si l'utilisateur arrête de faire défiler certains éléments sur le site Web (arrêtez de faire défiler en utilisant la molette de la souris et non le site Web), alors j'écris une fonction en JS natif pour cela:
window.addEventListener('scroll', function (event) {...});
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>
Le premier console.log () montre un bon div, même si j'utilise window au lieu de l'élément #scrolling_area, tout fonctionne bien.
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);
}
3 Réponses :
Essayez de joindre l'écouteur d'événements à un div parent de div # scrolling_area. Cela peut fonctionner
Et il y a un problème - div que j'ai essayé d'attacher est l'élément parent.
Je ne vois pas en quoi cela importerait, mais vous ne déclarez pas votre variable isScrolling avec la notation appropriée. Je ne sais pas pourquoi votre truc ne fonctionne pas, mais cela semble fonctionner pour moi : html
.item {
overflow: scroll;
}
.inner {
height: 50px;
overflow: scroll;
}
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
<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>
p >
Ce n'est peut-être pas tout ce dont vous avez besoin pour résoudre votre problème car je sais que votre code est plus volumineux que ce que vous avez publié.
Cependant, la raison pour laquelle l'événement de défilement n'est pas déclenché sur la zone de défilement est parce que la zone de défilement n'est pas actuellement défilable.
Pour que la zone de défilement puisse défiler (disons verticalement pour cet exemple), la hauteur de son contenu doit dépasser la zone de défilement en hauteur. Essayez de mettre du texte factice, c'est-à-dire du texte "lorem ipsum" dans la zone de défilement (pour être plus grande que la zone elle-même) et de définir une valeur CSS de la zone de défilement pour qu'elle soit overflow: scroll. La zone de défilement pourra faire défiler et donc l'événement de défilement se déclenchera (sur la zone de défilement). J'ai testé cela et cela fonctionne.
Remarque: La raison pour laquelle l'événement de défilement peut être détecté sur la fenêtre (dans votre code) est parce que la hauteur du contenu de la fenêtre (c'est-à-dire la zone de défilement et tous les autres éléments ensemble) est supérieure à la hauteur de la fenêtre elle-même, donc la fenêtre peut faire défiler.
<!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>
Oui vous avez raison. Ma zone de défilement doit être plus défilante. Merci pour les conseils, maintenant je sais ce que j'ai fait de mal.
@Reynolds Pas de problèmes :) Heureux d'avoir aidé :)
Avez-vous du code HTML et CSS pour avoir un exemple complet?
Eh bien, c'est du code généré dynamiquement, qui montre le linechart de d3.js donc il y a beaucoup de code. Les éléments que j'ai essayé d'attacher sont parent pour tous les autres éléments du graphique (y compris la valeur de valeur, la grille, les axes, les graduations et les pointeurs).
Avez-vous défini «isScrolling» quelque part plus tôt dans le code? par le code que vous avez posté seul, il serait indéfini
Oui, j'ai essayé de définir avant la fonction mais l'effet était le même.
Votre zone de défilement ne peut pas faire défiler ... Vous faites défiler la page, pas le div.