仅当存在滚动条并且向下滚动时才应用css

Question

这是一个有趣的问题，我真的很想知道这是否可行。我有一个可以控制的div，内容不断变化，有时滚动条是必要的，有时它不是。

在那些必要一旦他们开始向下滚动的情况下，我想为它添加一个顶部边框，以表示与周围内容的分离。

是否有css或jQuery解决方案？

我的HTML只是

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

并且css只是让它可以滚动

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

Answer 1

向div determine if it has a scrollbar添加id属性，然后通过jQuery添加css类（如果有）。

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

根据您强调的要求

更新：

帕特里克在我制作working jsfiddle时提到过，你可以使用滚动处理程序。

Answer 2

在jquery中，.scroll()听众......

  

是.on( "scroll", handler ) ...

的快捷方式      

当用户滚动到元素中的其他位置时，滚动事件将发送到元素。它适用于窗口对象，也适用于可滚动框架和元素，其中溢出CSS属性设置为滚动（或当元素的显式高度或宽度小于其内容的高度或宽度时自动）。

换句话说，当用户滚动时，它会触发带滚动条的div。

然而，be warned

  

...... mousemove或scroll can等高频事件每秒发射数十次，在这种情况下，明智地使用事件变得更加重要。

您提到向下滚动，这将需要事件句柄之间的计算和内存。这会让你有一个天真的滚动处理程序危害性能的危险。

我建议采用以下方法：

1. 不要在.scroll处理程序本身中进行工作，只需将其用作开始工作的催化剂。
2. 让滚动处理程序自行删除，因此一旦您确定该事件是向下滚动，它就不会一直停止。
3. 而是设置超时以重新检查用户是否仍在向下滚动。
4. 如果他们已停止滚动，请从相关课程中删除您的css，然后将滚动处理程序重新添加到相关的DOM元素中，这样如果他们再次滚动，您就可以了。