Div内显示滚动桥看似是一个简单的前端问题,然而实际会发现还是有挺多需要注意的.

本文尝试对div内显示滚动桥的各种主要实现及一些难题进行研究.

横向滚动桥

横向滚动桥比较简单,无需设置宽度,直接overflow-x:auto就ok.

这里需要注意的是使用white-space:nowrap去避免自动换行,导致横向滚动桥出不来。

如果要确保横向滚动桥显示,关键点是要不自动换行:

  1.  使用white-space:nowrap去避免自动换行,否则会导致横向滚动桥出不来。
  2.  如果有内部元素,内部元素需要使用inline-block layout,如果使用float会导致自动换行。 

纵向滚动桥

设置固定高度

如果设置高度,直接overflow-y:auto就ok. 没有什么需要特别注意的。

不设置固定高度

如果不设置固定高度,有两种常见的靠谱方法.

  1. 使用css3, vh视窗单位设置视窗高度.例如设置div为height:100vh代表, 这个div将占满整个屏幕可视高度,实际的场景一般不需要这样,另如通常div容器的适当高度为屏幕总高度减去导航栏的高度, 因此一般结合css3 calc来使用,例如

    #container{ height:calc(100vh - 100px) }

    实例:

  2. 使用max-height属性。备注:有时需求并不适合用max-height的方式。
    #container{
    max-height:500px;
    }
  3. 使用javascript设置正确的高度,这个没什么可说了,一种变通设置高度的方法,类似第一种方法,但需要javascript实现,对于新版的浏览器,直接使用文中第一种方法(CSS3 calc+vh)就好了。

相关资料:

CSS calc

https://developer.mozilla.org/en-US/docs/Web/CSS/calc

CSS3 vh单位

https://developer.mozilla.org/en-US/docs/Web/CSS/length

查看兼容性

http://caniuse.com/#search=calc

04-15 07:38