关于前端:移动端项目展示文章列表记住列表滚动位置

为什么列表滚动会相互影响?

因为它们并不是在本人外部滚动, 而是整个 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;
}