【css3】记录列表滚动位置

列表滚动互相影响？

因为列表并非在自己内部进行滚动，而是在整个body页面进行滚动。不论在哪个频道栏目下都会滚动body元素。

调试工具：查看当前滚动元素

function findScroller (element) {
     element.onscroll = function() { 
        console.log(element)
    }
        Array.from(element.children).forEach(findScroller)
}
findScroller(document.body)

解决：

让当前页面标签产生自己的滚动容器 ：

• 固定高度：height: xxx;
• 溢出滚动：overflow-y: auto;

需要注意高度应使用vh作为单位
CSS3 中新增了一种视口单位 vw 和vh，即根据你浏览器窗口的大小的单位，不受父元素影响。
PS：在移动端，视口单位相对于布局视口。

• 1w=可视窗口宽度的百分之一，比如窗口宽度是 750，则1vw=7.5px
• 1vh=可视窗口高度的百分之一，比如窗口高度是 667，则1vh=6.67px

使用唯一需要注意的就是它的兼容性：
在PC端已兼容到 IE9
在移动端 iOS 8以上以及Android 4.4 以上获得支持，并且在微信 x5 内核中也得到完美的全面支持