首页 > 代码库 > 如何实现内滚动布局

如何实现内滚动布局

2024-08-30 12:04:01   220人阅读

既然是内滚动，就有必要干掉浏览器原生<html>的滚动条，这个很简单：

html { overflow: hidden; }

HTML主结构示意如下：
  1. body
  2. -- page
  3. -- header
  4. -- side
  5. -- content

我们可以利用绝对定位元素的拉伸特性，使内滚动容器高度自适应匹配。
.page { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

应该很好理解，绝对定位，满屏拉伸，等同于：
.page { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
由于省了好几个字节，所以我舍弃了IE6使用了上面写法。

对于固定的头部header或者固定的侧边side, 你可以使用语义明确的position:fixed定位，或者直接使用position:absolute，因为滚动容器跟他们平级，所以，absolute其实就是fixed效果。

讲到这里就不得不说点题外话，很多人会遇到移动端position:fixed的底部输入框定位的头疼问题，如何解决？就是使用本文介绍的内滚动布局，然后底部使用position:absolute模拟fixed效果。 技术分享

代码方面，同样就是拉伸拉伸：

  1. .header { height: 62px; position: absolute; top: 0; right: 0; left: 0; }
  2. .side { width: 200px; position: absolute; top: 62px; bottom: 0; left: 0; }
最后就是高能的content, 还是一样的套路：
.content { position: absolute; top: 62px; right: 0; bottom: 0; left: 200px; overflow: auto; }
主体内容全部都在content里面玩耍。于是，一个高宽均自适应浏览器窗体的内滚动布局就成型了。
 
参考：https://isux.tencent.com/inner-scroll-layout.html

如何实现内滚动布局


联系
我们