CODEWITHSUNDEEP
javascripthtmlcss
Eddie Taliaferro II
Eddie Taliaferro II

Reputation: 185

Event AFTER scroll event stops?

So I have a box shadow that i want to add to a bar as shown in this example :

https://jsfiddle.net/eddietal2/qgLvsx2v/

this is the javascript that I have:

var topBar = document.getElementById('top-bar');
var wrapper = document.getElementById('wrapper');

wrapper.onscroll = function () {
  topBar.style.boxShadow = "10px 20px 30px blue"
}

The effect I am going for is, when the user scrolls, I want the box shadow to appear, but when they stop scrolling, I want the box shadow to disappear. How can I achieve this effect?

Upvotes: 0

Views: 981

Answers (3)

synthet1c
synthet1c

Reputation: 6282

You could use a timer to check if you have scrolled in the last N ms and call a callback after that about of time.

var wrapper = document.getElementById('wrapper')

function onScroll(element, scrolling, stopped) {
  let timer = null
  // bind the event to the provided element
  element.addEventListener('scroll', function (e) {
    // use a class to switch the box-shadow on
    element.classList.add('scrolling')
    if (typeof scrolling === 'function') {
      scrolling.apply(this, arguments)
    }
    // clear the existing timer
    clearTimeout(timer)
    // set a timer for 100 ms
    timer = setTimeout(() => {
      // if we get in here the page has not been scrolled for 100ms
      // remove the scrolling class
      element.classList.remove('scrolling')
      if (typeof scrolling === 'function') {
        stopped.apply(this, arguments)
      }
    }, 100)
  })
}

// call the function
onScroll(wrapper, 
  function scrolling(e) {
    e.target.classList.add('scrolling')
  },
  function stopped(e) {
    e.target.classList.remove('scrolling')
  }
)
* {
  box-sizing: border-box;
}

#wrapper {
  height: 200px;
  padding: 2em;
  overflow: auto;
  transition: .4s box-shadow;
}

#wrapper.scrolling {
   box-shadow: 0px 0px 60px blue inset;
}

#topBar > div {
  background: #eee;
  height: 200px;
  width: 200px;
  margin-bottom: 1em;
  position: relative;
  transition: .4s all;
}

#wrapper.scrolling #topBar > div {
  transform: perspective(1200px) translateZ(20px);
  box-shadow: 2px 2px 10px #777;
}
<div id="wrapper" class="">
  <div class="" id="topBar">
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
  </div>
</div>

Upvotes: 1

user4723924
user4723924

Reputation: 9

Onscroll is easy to monitor to apply the shadow but removing the shadow is the tricky part and the best I could think of was the event mouseout...

<!DOCTYPE html>
<html>
<head>
<style>

div {
 border: 1px solid black;
 width: 200px;
 height: 100px;
 overflow: scroll;
}

</style>
</head>
<body>

<div onmouseout="this.style.boxShadow='none';" onscroll="this.style.boxShadow='10px 20px 30px blue';">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.<br><br>
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'</div>

</body>
</html>

Upvotes: 0

elliottregan
elliottregan

Reputation: 1351

There is not 'scrollstop' event. You need to identify when the user stops scrolling yourself.

When the user scrolls, start a timer for a few dozen milliseconds (you'll have to play with this value), and clear any existing timers. When the timer reaches 0, call your function.

Upvotes: 1

Related Questions