Applying css only if there is a scroll bar and you are scrolling down

Question

This is kind of an interesting question and I'm really wondering if this is possible or not. I have a scolllable div that the content changes in and out of constantly and sometimes the scrollbar is necessary and sometimes it's not.

On those occasions that it is necessary once they start scrolling down I would like to add a top border to it to signify a separation from the content around it.

Is there a css or jQuery solution to this?

my html is just

<div class="scrollableDiv">
  <p>Content</p>
</div>

and the css just makes it scrollable at the moment

.scrollableDiv{
  height:42em;
  overflow-x:hidden;
  min-height:42em;
}

Answer 1

Add an id attribute to the div, determine if it has a scrollbar and then add a css class via jQuery if it does.

$('#myId').addClass('applyTopBorder');

Update based on your emphasized requirements:

As Patrick mentioned while I was making a working jsfiddle, you can use the scroll handler.

Answer 2

In jquery, the .scroll() listener...

is a shortcut for .on( "scroll", handler )...

The scroll event is sent to an element when the user scrolls to a different place in the element. It applies to window objects, but also to scrollable frames and elements with the overflow CSS property set to scroll (or auto when the element's explicit height or width is less than the height or width of its contents).

In other words, it will fire for a div with a scroll bar when the user scrolls it.

However, be warned

...high frequency events such as mousemove or scroll can fire dozens of times per second, and in those cases it becomes more important to use events judiciously.

You mention scrolling down, which will require computation and memory between the event handles. This puts you in danger of harming performance with a naive scroll handler.

I would suggest the following approach:

1. Don't do the work in the .scroll handler itself, just use it as a catalyst for starting the work.
2. Have the scroll handler remove itself, so it doesn't keep firing all the time, once you've determined the event is a downward scroll.
3. Instead, set a timeout to re-check whether or not the user is still scrolling down.
4. If they've stopped scrolling, remove your css from the class in question and re-add the scroll handler to the DOM element in question, so if they scroll again, you're good to go.