Jquery+css實現捲軸定位效果

這是在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}