<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>
<span style="font-size: 14px;">over-flow: auto; /* winphone8和android4+ */<br>-webkit-overflow-scrolling: touch; /* ios5+ */<br></span>
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>
<span style="font-size: 14px;">scrollContainer</span>
Élément parentscrollContainer
<span style="font-size: 14px;">position: absolute|relative</span>
Ajouter un positionnement
<span style="font-size: 14px;">scrollContainer</span>
À ce stade, vous devez ajouter le code suivant à l'élément parent
<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.
<span style="font-size: 14px;">activated</span>
Dans le cycle de vie de la liste de produits
, surveillez le <span style="font-size: 14px;">scrollContainer</span>
activé<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
<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>
. <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
En revenant de la page de détails, faites-le en même temps ; Opération, réaffectez la valeur scrollTop
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>
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!