仅在溢出时显示“向下滚动”按钮（响应式设计）

Question

我正在尝试建立一个响应式网站，其设计会根据浏览器的大小进行调整（无论是在移动设备上还是在桌面上调整大小）。

当在桌面上全屏显示时，我的文本完全适合其 div，但在浏览器窗口缩小时会溢出。当这种情况发生时 - 只有这样 - 我想显示一个“向下滚动”按钮，它会立即显示页面下方还有更多内容。

有没有只需要 HTML、CSS 和 jQuery 的解决方案？

提前致谢！

Answer 1

寻找.scrollHeight属性...并将其与溢出元素的高度进行比较。

以下只是一个如何测试它的示例：

$(window).on("load resize",function(){
  var height = $("#test").height();
  var scrollHeight = $("#test")[0].scrollHeight;
  
  if(scrollHeight>height){
    console.log("Need to scroll!");
    // Do something about your button...
  }
});

#test{
  height:200px;  /* Just to force it to overflow in this example... */
  overflow-y:scroll;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="test">
  Lorem ipsum dolor sit amet, vim at falli argumentum, rationibus scripserit ei pri, ius ea hendrerit interesset. Nam an iudico omnesque delicatissimi, ut usu suas denique omittantur, ut prima legimus perpetua vis. Quo et aperiam petentium. Affert maiorum eum an, id quo summo quidam.<br>
<br>
Vix et fabulas delenit, rebum commune accusamus an vix. Modo elitr volutpat ex sea, cum partem epicurei at. Ut sea latine perpetua iudicabit, vel movet nullam adipisci ut, cu legere ignota invenire usu. Eam ornatus volutpat sententiae in, et eros lorem duo. Quo ridens possit deleniti cu, no malis offendit mea, ullum soluta volutpat quo an. Eu choro persius posidonium eos.<br>
<br>
Quo amet tale eu. Ne alterum convenire duo, unum nostro probatus eu mei. Ubique nusquam id sit, est posse mandamus salutandi cu. Ea sumo dolores consequuntur sea. Ea mea prodesset gloriatur instructior, te tamquam quaerendum nam, vis eros utinam scaevola eu.<br>
<br>
Vide exerci graeco eum ei, enim graecis alienum usu et. Integre facilisi mnesarchum in mei. Ex mea utinam latine temporibus, periculis reprimique scripserit an eam, ex vix oblique alienum maiestatis. Sed ne veritus maluisset, no mel munere impetus aperiam. Wisi deserunt corrumpit usu ei.<br>
<br>
Dicunt posidonium mea eu, nominavi recusabo sententiae mei ad. Odio ignota per ut, pro menandri definitiones te. Sea ut postea mollis, an habemus persecuti vim. Nam ex reque denique, in eum fugit incorrupte. Sit sale definiebas no, vel mucius vulputate cu, exerci utinam impedit id mea. Vix libris deserunt consequuntur ne, eu sumo dolorem insolens mei. Nam quod unum adversarium eu.
</div>