Verwenden Sie iScroll, um Webinhalte zu scrollen-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

Verwenden Sie iScroll, um Webinhalte zu scrollen

Jun 14, 2018 pm 02:22 PM

滚动

Dieses Mal werde ich Ihnen vorstellen, wie Sie iScroll zum Scrollen von Webinhalten verwenden. Was sind die Vorsichtsmaßnahmen für die Verwendung von iScroll zum Scrollen von Webinhalten?

1. Einführung in iScroll

iScroll ist ein Scroll-Steuerelement für Web-Apps und kann auch das Zoomen ermöglichen. Ziehen Sie zum Aktualisieren, erfassen Sie Elemente genau, passen Sie Bildlaufleisten und andere Funktionen an. Die vom Blogger hier verwendete Version ist iScroll4.25. Sie können sie von der offiziellen Website herunterladen.
Offizielle Website-Adresse: http://iscrolljs.com/

2. So verwenden Sie iScroll

1.iScroll-Nutzungsstruktur

Der Aufbau zur optimalen Nutzung von iScroll ist im Allgemeinen wie folgt:

HTML:

&lt;p id=&quot;wrapper&quot;&gt;
  &lt;p id=&quot;scroller&quot;&gt;
   &lt;ul&gt;
    &lt;li&gt;&lt;/li&gt;
    ...
   &lt;/ul&gt;
   &lt;ul&gt;
    &lt;li&gt;&lt;/li&gt;
    ...
   &lt;/ul&gt;
  &lt;/p&gt;
 &lt;/p&gt;

Nach dem Login kopieren

Hinweis: 1. iScroll muss mit dem Wrapper verbunden sein Außerhalb des scrollenden Inhalts führt Contact zu Ergebnissen.
2. Nur das erste untergeordnete Element im Wrapper kann gescrollt werden.

2. iScroll instanziieren

iScroll muss vor dem Aufruf instanziiert werden. Der Instanziierungscode lautet wie folgt (fügen Sie den folgenden Code im Head-Tag hinzu ) :

&lt;script src=&quot;iscroll.js&quot;&gt;&lt;/script&gt;
 &lt;script&gt;
  var myscroll;//myscroll是全局变量，可以任意地方调用
  function loaded(){
   myscroll = new iScroll("wrapper");
   }
  window.addEventListener("DOMContentLoaded",loaded,false);
 &lt;/script&gt;

Nach dem Login kopieren

3. Rolling-Test-Beispiel

HTML+CSS:

&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0&quot;&gt;
&lt;meta name=&quot;apple-mobile-web-app-capable&quot; content=&quot;yes&quot;&gt;
&lt;meta name=&quot;apple-mobile-web-app-status-bar-style&quot; content=&quot;black&quot;&gt;
&lt;script src=&quot;iscroll-4.2.5fix.js&quot;&gt;&lt;/script&gt;&lt;!--引入js包--&gt;
&lt;!--实例化iScroll--&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
 var myscroll;
 function loaded(){
 myscroll = new iScroll("wrapper");
 }
 window.addEventListener("DOMContentLoaded",loaded,false);
&lt;/script&gt;
&lt;!--CSS样式设置--&gt;
#wrapper {
 position:absolute; z-index:1;
 top:45px; bottom:48px; left:0;
 width:100%;
 background:#aaa;
 overflow:auto;
}
#scroller {
 position:relative;
/* -webkit-touch-callout:none;*/
 -webkit-tap-highlight-color:rgba(0,0,0,0);
 float:left;
 width:100%;
 padding:0;
}
#scroller ul {
 position:relative;
 list-style:none;
 padding:0;
 margin:0;
 width:100%;
 text-align:left;
}
#scroller li {
 padding:0 10px;
 height:40px;
 line-height:40px;
 border-bottom:1px solid #ccc;
 border-top:1px solid #fff;
 background-color:#fafafa;
 font-size:14px;
}
#scroller li &gt; a {
 display:block;
}
&lt;/style&gt;
&lt;title&gt;滚动测试&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p id=&quot;wrapper&quot;&gt;
 &lt;p id=&quot;scroller&quot;&gt;
  &lt;ul id=&quot;thelist&quot;&gt;
   &lt;li&gt;Pretty row 1&lt;/li&gt;
   &lt;li id=&quot;aaa&quot;&gt;Pretty row 2&lt;/li&gt;
   &lt;li&gt;Pretty row 3&lt;/li&gt;
   &lt;li&gt;Pretty row 4&lt;/li&gt;
   &lt;li&gt;Pretty row 5&lt;/li&gt;
   &lt;li&gt;Pretty row 6&lt;/li&gt;
   &lt;li&gt;Pretty row 7&lt;/li&gt;
   &lt;li&gt;Pretty row 8&lt;/li&gt;
   &lt;li&gt;Pretty row 9&lt;/li&gt;
   &lt;li&gt;Pretty row 10&lt;/li&gt;
   &lt;li&gt;Pretty row 11&lt;/li&gt;
   &lt;li&gt;Pretty row 12&lt;/li&gt;
   &lt;li&gt;Pretty row 13&lt;/li&gt;
   &lt;li&gt;Pretty row 14&lt;/li&gt;
   &lt;li&gt;Pretty row 15&lt;/li&gt;
   &lt;li&gt;Pretty row 16&lt;/li&gt;
   &lt;li&gt;Pretty row 17&lt;/li&gt;
   &lt;li&gt;Pretty row 18&lt;/li&gt;
  &lt;/ul&gt;
 &lt;/p&gt;
&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

Nach dem Login kopieren

4. Laufeffekt

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie Bootstrap+WebUploader

So verwenden Sie das Dropdown-Feld Bootstrap+Selectpicker in aktuelle Projekte

Das obige ist der detaillierte Inhalt vonVerwenden Sie iScroll, um Webinhalte zu scrollen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn