共计 773 个字符,预计需要花费 2 分钟才能阅读完成。
为什么列表滚动会相互影响?
因为它们并不是在本人外部滚动, 而是整个 body 页面在滚动, 无论你是在 a 频道还是在 b 频道, 起实现滚动的都是 body 元素
小技巧: 如何疾速找到哪个元素产生的滚动?
将上面的代码粘贴到调式工具中运行一下, 而后滚动页面, 就能够看到是哪个元素产生的滚动了.
function findscroller(element) {element.onscroll = function() {console.log(element) } | |
Array.from(element.children).forEach(findscroller) | |
} | |
findscroller(document.body) |
怎么解决?
让每一个标签内容文章列表产生本人的滚动容器, 这样就不会相互影响了.
- 固定高度 : height: xxx;
- 移除滚动 ; overflow-y: auto;
而后咱们给文章列表组件的根节点款式设置如下:
-
.article-list {// 百分比单位是绝对以父元素的,( 审查元素发现他所有的父元素都没高) height: 100%; overflow-y: auto; } C3 中新增了一种视口单位 Vw 和 Vh , 何为视口, 就是依据你浏览器窗口的大小的单位, 不受父元素影响
PS : 在挪动端, 视口单位绝对于布局视口
- 1Vw = 可视窗口宽度的百分之一, 比方窗口宽度是 750. 则 1Vw = 7.5px
- 1Vh = 可视窗口高度的百分之一, 比方窗口宽度是 667. 则 1Vw = 6.675px
应用它惟一须要留神的就是它的兼容性
- 在 PC 端已兼容到 IE9
- 在挪动端 IOS8 以上以及 Android 4.4 以上取得反对, 并且在微信 X5 内核中也失去完满的全面反对, Vue 自身都只能兼容到 IE9 , 更何况这个视口单位了, 所以放心大胆的用吧.
最终设置代码如下:
.article-list { | |
height: 79vh; | |
overflow-y: auto; | |
} |
正文完