Detailed explanation of mobile elastic sliding and vue recording sliding position

This article mainly shares with you the detailed explanation of elastic sliding on the mobile terminal and vue recording sliding position. I hope it can help everyone.

-webkit-overflow-scrolling introduction

<span style="font-size: 14px;">-webkit-overflow-scrolling: auto  |  touch;<br></span>

<span style="font-size: 14px;">auto</span>: Normal Scrolling, when the finger is removed from the touch screen, the scrolling stops immediately
<span style="font-size: 14px;">touch</span>: Scroll rebound effect, when the finger is removed from the touch screen, the content The scrolling effect will be maintained for a period of time, and the speed and duration of continued scrolling are proportional to the intensity of the scrolling gesture. A new stack context is also created.

Compatible writing method

<span style="font-size: 14px;">over-flow: auto;     /* winphone8和android4+ */<br>-webkit-overflow-scrolling: touch;    /* ios5+ */<br></span>

How to use

Upload code:

<span style="font-size: 14px;"><p class="scrollContainer"><br>     <ul><br>       <li>1</li><br>       <li>2</li><br>       <li>3</li><br>       <li>4</li><br>       <li>5</li><br>       <li>6</li><br>       <li>7</li><br>       <li>8</li><br>       <li>9</li><br>       <li>10</li>  <br>     </ul><br></p><br></span>

<span style="font-size: 14px;">.scrollContainer{<br>    width: 100px;<br>    height: 50px;   <br>    -webkit-overflow-scrolling: touch;<br>    overflow-y: auto;       <br>    overflow-x: hidden;    <br>}<br>.scrollContainer>ul>li{<br>    height: 20px;<br>    width: 100%;<br>}<br></span>

Possible bugs

1. Parent element<span style="font-size: 14px;">scrollContainer</span>Add positioning<span style="font-size: 14px;">position: absolute|relative</span>. After sliding a few times, the scrollable area will become stuck and cannot be slid

2. Swiping the page quickly will result in a blank page, and the content will not be displayed until the sliding stops.

At this time, you should give the parent Element <span style="font-size: 14px;">scrollContainer</span> plus the following code:

<span style="font-size: 14px;">//解决第一个bug<br>z-index:1;    <br><br>//解决第二个bug<br>-webkit-backface-visibility: hidden;    <br>-webkit-transform: translate3d(0,0,0);<br></span>

Requirements

In the vue project, we may encounter such needs, for example:

In the product list page, click on a product to enter the details page.

Return to the product list page from the details page. The page that should be displayed should be the same as before.

In other words, the position of the scroll bar should be cached;

Ideas

1. The product list needs to be cached. For the page caching method, please check the vue official document keep-alive to cache the page. In this way, when the details page is returned, the page will not be reloaded.

2. In the product list life cycle<span style="font-size: 14px;">activated</span>, monitor the current<span style="font-size: 14px;">scrollContainer</span>The scroll event of the parent element, in the callback during scrolling, <span style="font-size: 14px;">scrollTop</span>(scroll The value of the bar (the distance from the scroll element, i.e. <span style="font-size: 14px;">scrollContainer</span>) is stored in and in <span style="font-size: 14px;">deactivated</span>Remove the monitoring of the current scroll event.

3. In the product list, when you click to enter the details page, the scroll bar position is cached. You can put it in <span style="font-size: 14px;">sessionStorage|localStorage</span>. Of course, if you use vuex, you can directly put the value into vuex for management;

4. When returning from the details page, do this at the same time Operation, reassign the <span style="font-size: 14px;">scrollTop</span> value you saved in the cache to the scroll bar of the current p

5. Ok, that’s the idea, you’re done.

The specific implementation in vue

I use vuex to manage the scroll bar position. The implementation code is as follows:

<span style="font-size: 14px;"><p class="scrollContainer" ref="scroll">    //加了一个ref，用于获取当前dom <br>     <ul><br>       <li>1</li><br>       <li>2</li><br>       <li>3</li><br>       <li>4</li><br>       <li>5</li><br>       <li>6</li><br>       <li>7</li><br>       <li>8</li><br>       <li>9</li><br>       <li>10</li>  <br>     </ul><br></p><br></span>

<span style="font-size: 14px;">computed:{<br>    ...mapGetters([<br>          "home_list_top"    //vuex中的存放的滚动条的位置<br>    ])<br>}<br>...<br>methods:{<br>    recordScrollPosition(e) {<br>      this.$store.dispatch("setHomeListTop",e.target.scrollTop);    //实时存入到vuex中<br>    }<br>}<br>...<br>activated(){  //滚动条位置的监听放到activated是因为此页面被keep-alive缓存了<br>    this.$refs.scroll.scrollTop = this.home_list_top;        //this.$refs.scroll拿到滚动的dom，即scrollContainer，this.home_list_top是存入到vuex里的值<br>    this.$refs.scroll.addEventListener("scroll",this.recordScrollPosition);    //添加绑定事件<br>},<br>deactivated(){  //keep-alive 的页面跳转时，移除scroll事件<br>    this.$refs.scroll.removeEventListener("scroll",this.recordScrollPosition);  //清除绑定的scroll事件<br>}<br></span>

Related recommendations:

jQuery elastic sliding navigation menu implementation ideas and code_jquery

HTML+CSS implementation web page Sliding door effect example sharing

jQuery slides to the bottom to load the next page of data example explanation

The above is the detailed content of Detailed explanation of mobile elastic sliding and vue recording sliding position. For more information, please follow other related articles on the PHP Chinese website!