这是在P项目碰到的一个功能实现，我姑且把它称为滚动条定位。

假设有一个这样的列表组件U，当我点击item7时,U会产生scrollTop值,同时U会被重新渲染。当我刷新页面时或者点击item5，scrollTop会自动变为0（点击item或刷新页面,U均会被重新渲染），而要实现的功能是刷新页面或点击当前可是范围内的其它item时，此组件仍维持当前的状态（scrollTop的值不改变），这需要维护scrollTop值，对滚动条定位。

假设index.js输出的页面的HTML结构是酱紫的：

<div class = "box"> 
    <ul class='ul'>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
        <li>item7</li>
        <li>item8</li>
        <li>item9</li>
        <li>item10</li>
        <li>item11</li>
        <li>item12</li>
    </ul>
</div>

因为要维护scrollTop值，我会建立一个scroll.js:

var scrollTop = {top:0}
module.exports = extendObj({}, {
    setScrollTop: function(navTop){
        scrollTop = navTop;
    },
    getScrollTop: function(){
        return scrollTop;
    }
});

当点击item而组件U都会被重新渲染，界面会跟初始化一样：

这样，就要记录之前点击的item。item.js代码如下：

var curItem = {id:0};
module.exports = extendObj({}, {
    setItem: function(item){
        curItem = item;
    },
    getItem: function(){
        return curItem;
    }
});

当点击item时，就会更新curItem:

var curItem = require('./item');
$(function(){
	$('.ul').on('click','li',function(){
    	$(this).addClass('active').siblings().removeClass('active');
    	curItem.setItem({id:$(this).index()});
    })
})

当然，还要监听U组件的scroll事件，去更新scrollTop值（b.js）：

var navTop = require('./scroll.js');
$('.ul').scroll(function(){
    var scrollTop = $(this).scrollTop();
    navTop.setScrollTop({top: scrollTop});
});

这样，当点击在当前可视范围内的item，scrollTop值就不会变：

$('.ul').scrollTop(navTop.getScrollTop().top);

当再次触发U组件的scroll事件时，b.js会更新scrollTop值。但是刷新页面时，所有数据都被初始化了，但在初始化页面中，能根据刷新前最后点击item的id来设置scrollTop：

//在index.js中
var curItemId = require('./item').getItem().id;
var navHeight = $('.ul').height();
$('.ul').children('li').each(function(){
    if(curItemId === $(this).index()){
        $('.ul').scrollTop($(this).position().top - navHeight);
    }
});

这样，刷新页面后，U组件的状态仍是刷新之前的状态。需要注意的是，position()是根据最近定位的父元素计算距离的，所以U组件应该相对定位或者绝对定位：

.box{
    margin: 100px auto;
    width: 200px;
    background-color: #f1f1f1;
    border: 0.5px solid #d3d7da;
}
.ul{
    height: 300px;
    margin-top: 12px;
    margin-left: -2px;
    overflow-y: auto;
    overflow-x: hidden;
    position:realtive
}
.ul li{
    list-style: none;
    position: relative;
    left: -40px;
    width: 184px;
    height: 32px;
    color: #323232;
    padding: 7px;
    cursor: pointer;
    padding-top: 20px;
}
.ul li:hover{
    border-left:2px solid #0087ee
}
.ul::-webkit-scrollbar{
    width: 5px;
    height: initial;
}
.ul::-webkit-scrollbar-track-piece{
    background-color: #f2f2f2;
}
.ul::-webkit-scrollbar-thumb{
    background-color: #c3ccd5;
    border-radius: 20px;
}
.active{
    border-left:2px solid #0087ee
}