Jquery+css实现滚动条定位效果

这是在P项目碰到的一个功能实现，我姑且把它称为滚动条定位。
 
假设有一个这样的列表组件U，当我点击item7时,U会产生scrollTop值,同时U会被重新渲染。当我刷新页面时或者点击item5，scrollTop会自动变为0（点击item或刷新页面,U均会被重新渲染），而要实现的功能是刷新页面或点击当前可是范围内的其它item时，此组件仍维持当前的状态（scrollTop的值不改变），这需要维护scrollTop值，对滚动条定位。
假设index.js输出的页面的HTML结构是酱紫的：
 
    
        
item1
        
item2
        
item3
        
item4
        
item5
        
item6
        
item7
        
item8
        
item9
        
item10
        
item11
        
item12
    

当点击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组件应该相对定位或者绝对定位：

css;toolbar:false">.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

}