– its – overflow – scrolling is introduced

-webkit-overflow-scrolling: auto  |  touch;Copy the code

Auto: Normal scrolling, when the finger is removed from the touch screen, scrolling immediately stops touch: scrolling rebound effect, when the finger is removed from the touch screen, the content will remain scrolling effect for a period of time, continue to scroll speed and duration is proportional to the intensity of the scrolling gesture. A new stack context is also created.

Compatible with writing

over-flow: auto; /* webkit-overflow-scrolling: scrolling; /* ios5+ */Copy the code

How to use

The code:

<div class="scrollContainer">
     <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
       <li>6</li>
       <li>7</li>
       <li>8</li>
       <li>9</li>
       <li>10</li>  
     </ul>
</div>Copy the code
.scrollContainer{
    width: 100px;
    height: 50px;   
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;       
    overflow-x: hidden;    
}
.scrollContainer>ul>li{
    height: 20px;
    width: 100%;
}Copy the code

Possible bugs

  1. The parent elementscrollContainerAdd positioningposition: absolute|relativeAfter sliding several times, the scrollable area will be stuck and can not slide
  2. A quick swipe will leave the page blank and the content will not be displayed until the swipe stops

At this point, you should add the following code to the parent element scrollContainer:

// Fix the first bug z-index:1; // Resolve the second bug -webkit-backface-visibility: hidden; - its - transform: translate3d (0, 0);Copy the code

demand

In a VUE project, we might encounter requirements such as:

On the commodity list page, click a commodity to enter the details page.

Return to the product list page from the details page, and the page should display the same page as before.

That is, the scrollbar position should be cached;

Train of thought

  1. The list of items needs to be cached, please refer to the official vue document Keep-alive to cache the page, so that the page will not be reloaded when the details page returns.
  2. During the item list life cycleactivated, listen on the currentscrollContainerThe scroll event of the parent element, retrieved from the scroll callbackscrollTopScrollbar distance scrollelement i.escrollContainerDistance), stored into as well as indeactivatedRemoves the listener for the current scrolling event.
  3. In the item list, click to enter the details page, the scroll bar position is cached, you can putsessionStorage|localStorageIn the. Of course, if you use Vuex, you can manage values directly in Vuex;
  4. When you return from the detail page, do something like this to store you in the cachescrollTopValue reassigns to the scroll bar of the current div
  5. Ok, so that’s the idea. We’re done.

Vue concrete implementation

I am using VUEX to manage the scroll bar position, the implementation code is as follows:

<div class="scrollContainer" ref="scroll"> Used to get the current dom < ul > < li > 1 < / li > < li > 2 < / li > < li > 3 < / li > < li > 4 < / li > < li > 5 < / li > < li > 6 < / li > < li > 7 < / li > < li > 8 < / li > < li > 9 < / li > <li>10</li> </ul> </div>Copy the code
computed:{ ... MapGetters (["home_list_top" //vuex])}... methods:{ recordScrollPosition(e) { this.$store.dispatch("setHomeListTop",e.target.scrollTop); // Live save to vuex}}... $refs.scroll.scrollTop = this.home_list_top; $refs.scrolltop = this.home_list_top; //this.$refs.scroll gets the dom of scrollContainer, Enclosing home_list_top is placed onto the values in the vuex enclosing $refs. Scroll. The addEventListener (" scroll ", enclosing recordScrollPosition); // Add binding events}, deactivated(){//keep-alive page jumps, Remove the scroll event this $refs. Scroll. RemoveEventListener (" scroll ", enclosing recordScrollPosition); // Clear the bound Scroll event}Copy the code

The latter

If there's a better way, talk to each other.Copy the code