为什么列表滚动会相互影响?
因为它们并不是在本人外部滚动,而是整个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;}