时间戳

首页 > 解决方案 > addEventListener 在 div 中滚动

javascript - addEventListener 在 div 中滚动

问题描述

我正在尝试按类或 id 来定位 div 的滚动，但我无法使其工作。console.log(scrolled) 不会激活控制台中的任何内容。有人可以帮我吗？

我使用的 JS 是

document.getElementsByClassName('.site-content').addEventListener('scroll', () => {
  
  const scrolled = document.getElementsByClassName('.site-content').scrollY;
  
  console.log(scrolled);

});

我的部分的 CSS 是

.site-content{
width:100vh;
  height:100vw;
  overflow-x: hidden;
  overflow-y: scroll;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left; 
  position:absolute;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

标签： javascriptclassscrolladdeventlistener

解决方案

你有几个问题：

  1. getElementsByClassName()返回一个HTMLCollection（类似于数组），而不是单个元素，因此您不能addEventListener()在其上使用。相反，您可以使用querySelector()which 将返回单个元素。请注意， usingquerSelector()是一种比 is 更优化的获取单个元素的.getElementsByClassName(class)[0]方法。该.getElementsByClassName()方法将在整个 DOM 树中搜索具有该类的元素，然后[0]用于获取搜索完成后找到的第一个元素（丢弃它找到的所有其他元素）。虽然querySelector()将在 DOM 中搜索您的元素，并在找到与该类匹配的元素后立即停止搜索，但它不会继续寻找更多的元素.getElementsByClassName()。

  2. scrollY不是您从中获取的元素.querySelector()的属性。相反，您可以使用该.scrollTop属性。

  3. 您的脚本在页面加载之前运行，这意味着您的脚本将无法找到您尝试使用querySelector(). 有几种方法可以解决这个问题，一种方法是将<script></script>包含代码的标签移动到结束</body>标签之前，以便它只在加载 HTML 元素后运行。

  4. 最后，每次使用.querySelector(). 这是您添加事件侦听器时的一次，然后是每次滚动事件发生时（这是很多次！）。由于查询 DOM 是一项昂贵的操作，因此最好将其保持在最低限度。您可以改为查询 DOM 一次以获取您的元素，并在回调中使用该元素引用来处理滚动事件。

修复以上几点：

const scrollContent = document.querySelector('.site-content'); // store in a variable so we can reference the element in multiple locations
scrollContent.addEventListener('scroll', () => {
  const scrolled = scrollContent.scrollTop; // reuse `scrollContent` innstead of querying the DOM again
  console.log(scrolled);
});

推荐阅读