Question

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

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

是否有解决方案只需要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>

显示＆＃34;向下滚动＆＃34;仅溢出按钮（响应式设计）

1 个答案: