How to use the scroll bar event on an element

I want the change the background of an element when the scroll bar is beside that element. how to do that? I used 'scroll' event , but didn't work

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


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

like this, when I click on that section the background changes

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