移动端项目-展示文章列表记住列表滚动位置

---

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

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