Teilen Sie Ihre Erfahrungen mit Webkit-Overflow-Scolling in CSS3-CSS-Tutorial-php.cn

Teilen Sie Ihre Erfahrungen mit Webkit-Overflow-Scolling in CSS3

yulia

Freigeben： 2018-09-19 16:16:53

Original

1895 Leute haben es durchsucht

Bildlaufleisten werden häufig im Seitenlayout verwendet. In diesem Artikel teile ich meine Erfahrungen mit der Verwendung von -webkit-overflow-scrolling, um Fallstricke für Freunde zu vermeiden. Wenn Sie es brauchen, können Sie hier einen Blick darauf werfen.

Wir alle wissen, dass im iOS-Safari-Browser und im App-Core-Browser der Inhalt einer h5-Seite die Höhe des Bildschirms überschreitet und unsere Finger über den Bildschirm gleiten, sobald die Geste verschwindet Auf dem Bildschirm wird der Bildlauf sofort beendet. Zu diesem Zeitpunkt können wir -webkit-overflow-scrolling=touch festlegen, um einen reibungslosen Bildlauf auf der Seite zu gewährleisten. Dies führt jedoch auch zu vielen Problemen.

1. Die Einstellung „-webkit-overflow-scrolling touch“ allein für den Körper ist ungültig. Sie muss gleichzeitig für HTML und Körper festgelegt werden. Der Code lautet wie folgt:

html,body{
    height: 100%;
    overflow: auto;
   -webkit-overflow-scrolling: touch;
}

Nach dem Login kopieren

2. Einstellung des übergeordneten Containers – Nach webkit-overflow-scrolling=touch dürfen feste untergeordnete Elemente nicht im Untercontainer angezeigt werden. Denn wenn Sie -webkit-overflow-scrolling=touch festlegen, werden Sie feststellen, dass das feste Attribut beim Verschieben des Bildschirms ungültig ist und auch mit dem Bildschirm gescrollt wird. Dieses Element wird nur auf der Seite fixiert, wenn der Bildlauf stoppt. Offensichtlich ist dies nicht das Ergebnis, das wir wollen.

Meine Lösung besteht hier nicht darin, -webkit-overflow-scrolling für das Body-Element festzulegen, einen weiteren div-Container hinzuzufügen, um ihn dort festzulegen, wo ein Scrollen erforderlich ist, und dann alle Container, die repariert werden müssen, direkt auf dem zu platzieren Körper innerhalb des Elements.

3. Das Festlegen des Attributs „-webkit-overflow-scrolling“ für ein Div allein ist ungültig. Nach dem Testen habe ich festgestellt, dass ich zuerst den übergeordneten Container „div1“ auf einen Container mit einer Höhe festlegen muss Der spezifische Code zum Festlegen des Attributs „-webkit-overflow-scrolling“ lautet wie folgt:

<style>.div-p{ width: 100%; height: 500px;/*这是测试值，具体针对项目需求设置，不要超出子容器内容高度*/overflow: hidden;/*设不设定这个值对-webkit-overflow-scrolling没有影响*/}
.div-c{ width: 100%; height: 2000px; overflow: auto;/*测试发现一定要设定这个值才起作用*/ -webkit-overflow-scrolling: touch;}</style>
<div class="div-p">
<div class="div-c">我要滚动啊，，在ios要顺畅啊</div>
</div>

Nach dem Login kopieren

Nach wiederholten Tests wurde festgestellt, dass die folgenden Einstellungen auch das Attribut „-webkit-overflow-scrolling“ effektiv auslösen können Attribut. Der spezifische Code lautet wie folgt:

<style>
.content-box{
  height: 500px;/*经过测试后发现只要设定的这个高度小于屏幕高度，-webkit-overflow-scrolling属性也能有效触发*/
  border: solid 1px green;
  overflow: auto;
  -webkit-overflow-scrolling: touch;}
</style>
<body>
<div class="content-box">哎呀我是要滚动的啊<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
有效果的哦。。。
</div>
</body>

Nach dem Login kopieren

Natürlich muss die obige Version am Ende des HTML-Renderings ihre Höhe ändern, um die gleiche Höhe wie der Bildschirm zu erreichen, aber die Wartbarkeit dieser Methode ist auch so Schlecht. Später wurde eine Lösung gefunden:

<style>
.ios-scroll-father{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 10rem ;
  height: 100%;}
.ios-scroll-child{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 10rem ;
  overflow: auto;}
  -webkit-overflow-scrolling touch
</style>
<div class="ios-scroll-father">
<div class="ios-scroll-child">
我要完美解决ios的顺畅滑动问题啊，，，来试试咯。演示，请自己添加代码到超出屏幕内容哦~
</div>
</div>

Nach dem Login kopieren

Hier eine Erinnerung: Legen Sie beim Festlegen des Attributs -webkit-overflow-scrolling entweder keine Höhe oder die Höhe fest +Padding sollte die Höhe des Bildschirms nicht überschreiten, sonst werden Sie beim Scrollen nach oben oder unten feststellen, dass ein Teil davon abgeschnitten wird und Sie müssen darüber wischen, um angezeigt zu werden. . . Dies ist eine Falle. Ich habe dieses Phänomen entdeckt, nachdem ich versehentlich die Höhe auf 100 % gesetzt und die Auffüllung vorgenommen habe. Dann konnte ich das Problem nach der vollständigen Suche nicht finden, sodass ich nur den Code löschen und es langsam beheben konnte.

Natürlich, wenn das nur die Probleme wären, wäre es wirklich einfach, sie zu lösen. Eines Tages habe ich jedoch eine Liste mit Scroll-Page-Effekten erstellt Es wurde festgestellt, dass scrollTop nicht von Zeit zu Zeit aktualisiert wird und der scrollTop-Wert erst abgerufen werden kann, wenn die Seite aufhört zu scrollen.

5. Die Übergangsanimation wird beim Scrollen der Seite nicht ausgeführt. Wenn Sie eine Lösung haben, hinterlassen Sie mir bitte eine Nachricht. . .

Die oben genannten Schlussfolgerungen sind die Schlussfolgerungen, zu denen wir während der Entwicklung des Projekts gelangt sind und die wir auf der Grundlage der von uns gefundenen Informationen wiederholt getestet haben. Wenn etwas nicht stimmt, weisen Sie es bitte darauf hin.

Das obige ist der detaillierte Inhalt vonTeilen Sie Ihre Erfahrungen mit Webkit-Overflow-Scolling in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!