Div内显示滚动桥看似是一个简单的前端问题,然而实际会发现还是有挺多需要注意的.
本文尝试对div内显示滚动桥的各种主要实现及一些难题进行研究.
横向滚动桥
横向滚动桥比较简单,无需设置宽度,直接overflow-x:auto就ok.
这里需要注意的是使用white-space:nowrap去避免自动换行,导致横向滚动桥出不来。
如果要确保横向滚动桥显示,关键点是要不自动换行:
- 使用white-space:nowrap去避免自动换行,否则会导致横向滚动桥出不来。
- 如果有内部元素,内部元素需要使用inline-block layout,如果使用float会导致自动换行。
纵向滚动桥
设置固定高度
如果设置高度,直接overflow-y:auto就ok. 没有什么需要特别注意的。
不设置固定高度
如果不设置固定高度,有两种常见的靠谱方法.
- 使用css3, vh视窗单位设置视窗高度.例如设置div为height:100vh代表, 这个div将占满整个屏幕可视高度,实际的场景一般不需要这样,另如通常div容器的适当高度为屏幕总高度减去导航栏的高度, 因此一般结合css3 calc来使用,例如
#container{ height:calc(100vh - 100px) }
实例:
- 使用max-height属性。备注:有时需求并不适合用max-height的方式。
#container{
max-height:500px;
} - 使用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