Explication détaillée du glissement élastique mobile et de la position de glissement de l'enregistrement de vue

Cet article partage principalement avec vous l'explication détaillée du glissement élastique sur le terminal mobile et la position de glissement de l'enregistrement de vue. J'espère qu'il pourra aider tout le monde.

-webkit-overflow-scrolling introduction

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

<code><span style="font-size: 14px;">auto</span>auto
: Défilement normal, lorsque le doigt est retiré de l'écran tactile, le défilement s'arrête immédiatement <span style="font-size: 14px;">touch</span><span style="font-size: 14px;">toucher</span>

: Effet rebond du défilement, lorsque le doigt est supprimé de l'écran tactile Éloignez-vous et le contenu conservera l'effet de défilement pendant un certain temps. La vitesse et la durée du défilement continu sont proportionnelles à l'intensité du geste de défilement. Un nouveau contexte de pile est également créé.

Écriture compatible

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

Comment utiliser

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>

Bogues possibles

1. <span style="font-size: 14px;">scrollContainer</span>Élément parentscrollContainer <span style="font-size: 14px;">position: absolute|relative</span>Ajouter un positionnement

   position : absolue|relative
2. Après avoir glissé plusieurs fois, la zone de défilement restera bloquée et ne pourra plus être utilisée. Lors du glissement

, la page apparaîtra vide et le contenu ne sera affiché que lorsque le glissement s'arrêtera

<span style="font-size: 14px;">scrollContainer</span>À ce stade, vous devez ajouter le code suivant à l'élément parent

scrollContainer

<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>

 :

Exigences

Dans le projet vue, nous pouvons rencontrer de telles exigences, par exemple :

Dans la liste des produits page, cliquez sur un produit, entrez dans la page de détails.

Retournez à la page de liste des produits à partir de la page de détails. La page qui doit s'afficher doit être la même qu'avant.

En d'autres termes, la position de la barre de défilement doit être mise en cache

1. Idée

La liste de produits doit être mise en cache. Pour la méthode de mise en cache des pages, veuillez consulter le document officiel de vue keep-alive pour mettre la page en cache, de sorte que lorsque la page de détails est renvoyée, la page ne soit pas rechargée. .

2. <span style="font-size: 14px;">activated</span>Dans le cycle de vie de la liste de produits <span style="font-size: 14px;">scrollContainer</span>activé, surveillez le <code><span style="font-size: 14px;">scrollTop</span>scrollContainerL'événement scroll de l'élément parent, dans le rappel lors du défilement, obtient <span style="font-size: 14px;">scrollContainer</span><code><span style="font-size: 14px;">scrollTop</span> <span style="font-size: 14px;">deactivated</span>(La distance entre la barre de défilement et l'élément de défilement, c'est-à-dire scrollContainer

) la valeur est stockée dans et dans
3. <p>désactivé<span style="font-size: 14px;"></span></p>Supprimer la surveillance de l'événement de défilement en cours. <span style="font-size: 14px;">sessionStorage|localStorage</span>
4. Dans la liste des produits, lorsque vous cliquez pour accéder à la page de détails, la position de la barre de défilement est mise en cache. Vous pouvez la mettre dans

   . <span style="font-size: 14px;">sessionStorage|localStorage</span><code><span style="font-size: 14px;">scrollTop</span>. Bien sûr, si vous utilisez vuex, vous pouvez directement mettre la valeur dans vuex pour la gestion

5. En revenant de la page de détails, faites-le en même temps ; Opération, réaffectez la valeur scrollTop

que vous avez enregistrée dans le cache à la barre de défilement du p

actuel

Ok, c'est l'idée, c'est fini. J'utilise vuex pour gérer la position de la barre de défilement. Le code d'implémentation est le suivant :

<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>

Recommandations associées :

Implémentation du menu de navigation coulissant élastique jQuery. idées et code_jquery

Implémentation HTML+CSS du partage d'exemples d'effet de porte coulissante Web

jQuery glisse vers le bas pour charger la page de données suivante exemple d'explication

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!