如何在元素上使用滚动条事件答案

【问题标题】：How to use the scroll bar event on an element如何在元素上使用滚动条事件
【发布时间】：2020-03-14 21:14:24
【问题描述】：

当滚动条位于该元素旁边时，我想更改该元素的背景。我怎样才能做到这一点？我使用了“滚动”事件，但它不起作用。

<div id="skill">This is Skill</div>


var about = document.getElementById('about');
 about.addEventListener('scroll', function() {
 about.style.background='green';
});

像这样，当我点击该部分时，背景会发生变化：

about.addEventListener('click', function() {
 about.style.background='green'});

【问题讨论】：

您可能正在滚动 HTML 正文（页面）而不是项目本身。这就是为什么滚动甚至没有触发 about 容器
我认为，你应该给那个 div 一个固定的高度，并在属性中添加滚动 css
您的逻辑是合理的，但是您正在检查实际 about 元素上的滚动，而我假设您正在滚动主页滚动条。因此，在您的代码中定位该滚动条：window.addEventListener("scroll", doSomething()};
是的，我的意思是当我使用页面滚动条时。 @LucaDeNardi
我认为您必须澄清“当滚动条在该元素旁边时，我希望更改元素的背景”的意思。这是否意味着关于部分在滚动时变得可见？什么时候在屏幕中间？我认为这个问题不够清楚

标签： javascript html css dom events

【解决方案1】：

我从您的问题中猜想是，您想在页面滚动时添加背景。

var about = document.getElementById('about');
window.addEventListener('scroll', function() {
  about.style.background = 'green';
});

body{
  height:800px;
}

<html>
<body>
<div id="about">This is Skill</div>
</body>
<html>

【讨论】：