All about Div内显示滚动桥

Posted 2020-10-08

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