我试图通过类或id来滚动div，但是我不能使它工作。console.log（滚动）没有激活控制台中的任何东西。有人能帮帮我吗？
我使用的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;
}
2条答案
按热度按时间t8e9dugd1#
你有几个问题：
1.返回一个HTMLCollection（类似于数组），而不是单个元素，因此不能在其上使用
addEventListener()。可以使用querySelector()，它将返回单个element。请注意，使用querSelector()是比.getElementsByClassName(class)[0]更优化的获取单个元素的方法。.getElementsByClassName()方法将在整个DOM树中搜索包含该类的元素，然后使用[0]获取搜索完成后找到的第一个元素（丢弃它找到的所有其他东西）。而querySelector()将在DOM中搜索您的元素，并在找到与类匹配的元素时立即停止搜索，它不会像.getElementsByClassName()那样继续寻找更多的元素。scrollY不是从.querySelector()返回的element的属性，而是可以使用.scrollTop属性。1.您的脚本在页面加载之前运行，这意味着您的脚本将无法找到您试图使用
querySelector()获取的HTML元素。有几种方法可以解决这个问题，一种方法是将包含您代码的<script></script>标记移到</body>结束标记之前，以便它只在HTML元素加载后运行。1.最后，每次使用
.querySelector()时都要查询DOM，其中一次是在添加事件侦听器时，然后是在每次发生scroll事件时（这是很多次！）。由于查询DOM是一个开销很大的操作，所以最好将其保持在最小值。您可以改为查询DOM一次来获取您的元素，并在scroll事件的回调中使用该元素引用。1.虽然这不是一个bug，但你可以通过添加
{pasive: true}选项来提高触摸设备上的滚动性能。解决上述问题：
xfb7svmp2#
你必须选择HTMLCollection中的第一个元素，并且没有scrollY，可能是window.scrollY下面是一个如何获取滚动位置的示例，我添加了高度：300px到你的css，所以它滚动