Jquery+css to realize the effect of scroll bar positioning

This is the implementation of a function encountered in the P project, which I call the scroll bar positioning.   Suppose there is such a list component U, when I click Item7, u will produce scrolltop value and u will be rendered again. When I refresh the page or click Item5,scrolltop will automatically change to 0 (click the Item or refresh the page, you will be rendered again), and to achieve the function is to refresh the page or click on the current range of other item,
This component still maintains its current state (the ScrollTop value does not change), which requires maintaining scrolltop values and positioning the scrollbar. Suppose the HTML structure of the Index.js output page is purple: <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>          &Lt;li>item9</li>         <li>item10</li>          <li>item11</li>          <li>item12</li>     </ul> </div> because to maintain scrolltop values, I will build a scroll.js:var scrolltop = {top:0} module.exports = extendobj ({}, {     setscrolltop: function (navtop) {        
scrolltop = navtop; &NBSP;&NBSP;&NBSP;&NBSP},     getscrolltop: function () {     
   return scrollTop;     }});

When you click on the item and the component u will be rendered again, the interface will be the same as the initialization:

This way, you need to record the item you clicked before. The Item.js code is as follows:

var CurItem = {id:0};

Module.exports = Extendobj ({}, {

setitem:function (item) {

CurItem = Item;

},

getitem:function () {return

CurItem;

}

});

When the item is clicked, the CurItem is updated:

var CurItem = require ('./item ');

$ (function () {

$ ('. UL '). On (' Click ', ' Li ', function () {

$ (this). addclass (' active '). Siblings (). Removeclass (     ' Active ');

Curitem.setitem ({id:$ (this). Index ()});

})

})

Of course, you also need to monitor the scroll event of the U component to update the ScrollTop value (b.js):

var navtop = require ('./scroll.js ');

$ ('. UL '). Scroll (function () {

var scrolltop = $ (this). ScrollTop ();

Navtop.setscrolltop ({top:scrolltop});

};

In this way, the Item,scrolltop value that is clicked in the current visual range does not change:

$ ('. UL '). ScrollTop (Navtop.getscrolltop (). top);

When the scroll event of the U component is triggered again, b.js updates the scrolltop value. But when you refresh the page, all the data is initialized, but in the initialization page, you can set the scrolltop according to the ID of the item that was last clicked before the refresh:

In 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);

}

});

This way, after the page is refreshed, the state of the U component is still before the refresh state. It should be noted that the position () calculates the distance based on the nearest parent element, so the U component should be relative or absolutely positioned:

. 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{   &NBsp;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}