iScroll插件实现内容滚动案例详解
这次给大家带来iScroll插件实现内容滚动案例详解，iScroll插件实现内容滚动的注意事项有哪些，下面就是实战案例，一起来看一下。
一、iScroll简介
iScroll 是一款针对web app使用的滚动控件，它可以模拟原生IOS应用里的滚动列表操作，还可以实现缩放、拉动刷新、精确捕捉元素、自定义滚动条等功能。这里博主使用的版本iScroll4.25，目前最新版本是iScroll5，大家可以去官网下载。
官网地址：http://iscrolljs.com/
二、iScroll使用方法
1.iScroll使用结构
最优化使用iScroll的结构一般如下所示：
HTML:
<p id="wrapper"> <p id="scroller"> <ul> <li></li> ... </ul> <ul> <li></li> ... </ul> </p> </p>
注：1、iScroll一定要与滚动内容外面的wrapper进行联系才会产生效果。
2、只有wrapper里的第一个子元素才可以滚动。
2、实例化iScroll
iScroll必须在调用之前实例化，实例化代码如下（在head标签中添加如下代码）：
<script src="iscroll.js"></script>
<script>
var myscroll;//myscroll是全局变量，可以任意地方调用
function loaded(){
myscroll = new iScroll("wrapper");
}
window.addEventListener("DOMContentLoaded",loaded,false);
</script>三、滚动测试实例
HTML+CSS:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script src="iscroll-4.2.5fix.js"></script><!--引入js包-->
<!--实例化iScroll-->
<script type="text/javascript">
var myscroll;
function loaded(){
myscroll = new iScroll("wrapper");
}
window.addEventListener("DOMContentLoaded",loaded,false);
</script>
<!--CSS样式设置-->
#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 > a {
display:block;
}
</style>
<title>滚动测试</title>
</head>
<body>
<p id="wrapper">
<p id="scroller">
<ul id="thelist">
<li>Pretty row 1</li>
<li id="aaa">Pretty row 2</li>
<li>Pretty row 3</li>
<li>Pretty row 4</li>
<li>Pretty row 5</li>
<li>Pretty row 6</li>
<li>Pretty row 7</li>
<li>Pretty row 8</li>
<li>Pretty row 9</li>
<li>Pretty row 10</li>
<li>Pretty row 11</li>
<li>Pretty row 12</li>
<li>Pretty row 13</li>
<li>Pretty row 14</li>
<li>Pretty row 15</li>
<li>Pretty row 16</li>
<li>Pretty row 17</li>
<li>Pretty row 18</li>
</ul>
</p>
</p>
</body>
</html>四、运行效果
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci iScroll插件实现内容滚动案例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1379
52
Cara mendayakan Amaran Kandungan Sensitif pada iPhone dan ketahui ciri-cirinya
Sep 22, 2023 pm 12:41 PM
Terutamanya sepanjang dekad yang lalu, peranti mudah alih telah menjadi cara utama untuk berkongsi kandungan dengan rakan dan keluarga. Antara muka yang mudah diakses, mudah digunakan dan keupayaan untuk menangkap imej dan video dalam masa nyata menjadikannya pilihan yang bagus untuk mencipta dan berkongsi kandungan. Walau bagaimanapun, adalah mudah bagi pengguna yang berniat jahat untuk menyalahgunakan alatan ini untuk memajukan kandungan sensitif yang tidak diingini yang mungkin tidak sesuai untuk dilihat dan tidak memerlukan persetujuan anda. Untuk mengelakkan perkara ini berlaku, ciri baharu dengan "Amaran Kandungan Sensitif" telah diperkenalkan dalam iOS17. Mari lihat dan cara menggunakannya pada iPhone anda. Apakah Amaran Kandungan Sensitif baharu dan bagaimana ia berfungsi? Seperti yang dinyatakan di atas, Amaran Kandungan Sensitif ialah ciri privasi dan keselamatan baharu yang direka untuk membantu menghalang pengguna daripada melihat kandungan sensitif, termasuk iPhone
Bagaimana untuk menukar pelayar Microsoft Edge untuk dibuka dengan navigasi 360 - Bagaimana untuk menukar pembukaan dengan navigasi 360
Mar 04, 2024 pm 01:50 PM
Bagaimana untuk menukar halaman yang membuka pelayar Microsoft Edge kepada navigasi 360 Ia sebenarnya sangat mudah, jadi sekarang saya akan berkongsi dengan anda kaedah menukar halaman yang membuka pelayar Microsoft Edge kepada 360 navigasi Rakan-rakan yang memerlukan lihat. Saya harap dapat membantu semua orang. Buka penyemak imbas Microsoft Edge. Kami melihat halaman seperti di bawah. Klik pada ikon tiga titik di sudut kanan atas. Klik "Tetapan." Klik "Pada permulaan" dalam lajur kiri halaman tetapan. Klik pada tiga titik yang ditunjukkan dalam gambar di lajur kanan (jangan klik "Buka Tab Baharu"), kemudian klik Edit dan tukar URL kepada "0" (atau nombor lain yang tidak bermakna). Kemudian klik "Simpan". Seterusnya, pilih "
Bagaimana untuk melaksanakan tatal ke kedudukan elemen tertentu dalam JavaScript?
Oct 22, 2023 am 08:12 AM
Bagaimana untuk melaksanakan fungsi menatal ke kedudukan elemen tertentu dalam JavaScript? Dalam halaman web, apabila kita perlu menumpukan perhatian pengguna kepada kedudukan elemen tertentu, kita boleh menggunakan JavaScript untuk melaksanakan fungsi menatal ke kedudukan elemen yang ditentukan. Artikel ini akan memperkenalkan cara melaksanakan fungsi ini melalui JavaScript dan memberikan contoh kod yang sepadan. Pertama, kita perlu mendapatkan maklumat kedudukan elemen sasaran. Anda boleh menggunakan Element.getBoundingClient
HTML, CSS dan jQuery: Buat papan buletin tatal automatik
Oct 27, 2023 pm 06:31 PM
HTML, CSS dan jQuery: Buat papan buletin menatal secara automatik Dalam reka bentuk web moden, papan buletin sering digunakan untuk menyampaikan maklumat penting dan menarik perhatian pengguna. Papan buletin tatal automatik digunakan secara meluas pada halaman web Ia membolehkan kandungan buletin menatal dan memaparkan pada halaman dalam bentuk animasi, meningkatkan kesan paparan maklumat dan pengalaman pengguna. Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk membuat papan buletin tatal automatik dan memberikan contoh kod khusus. Pertama, kita memerlukan HT
Pantau tingkah laku menatal iframe
Feb 18, 2024 pm 08:40 PM
Cara memantau penatalan iframe memerlukan contoh kod khusus Apabila kami menggunakan teg iframe untuk membenamkan halaman web lain dalam halaman web, kadangkala kami perlu melakukan beberapa operasi khusus pada kandungan dalam iframe. Salah satu keperluan biasa ialah mendengar acara tatal iframe supaya kod yang sepadan boleh dilaksanakan apabila tatal berlaku. Berikut akan memperkenalkan cara menggunakan JavaScript untuk memantau penatalan iframe, dan menyediakan contoh kod khusus untuk rujukan. Dapatkan elemen iframe Pertama, kita perlukan
Bagaimana untuk menyediakan Cheat Engine dalam bahasa Cina? Kaedah Cina tetapan Cheat Engine
Mar 13, 2024 pm 04:49 PM
CheatEngine ialah editor permainan yang boleh mengedit dan mengubah suai memori permainan. Walau bagaimanapun, bahasa lalainya adalah bukan bahasa Cina, yang menyusahkan ramai rakan Jadi bagaimana untuk menetapkan bahasa Cina dalam CheatEngine? Hari ini, editor akan memberi anda pengenalan terperinci tentang cara menyediakan bahasa Cina dalam CheatEngine saya harap ia dapat membantu anda. Kaedah tetapan satu: 1. Klik dua kali untuk membuka perisian dan klik "edit" di sudut kiri atas. 2. Kemudian klik "tetapan" dalam senarai pilihan di bawah. 3. Dalam tetingkap yang terbuka, klik "bahasa" dalam lajur kiri
Di mana untuk menetapkan butang muat turun dalam Microsoft Edge - Bagaimana untuk menetapkan butang muat turun dalam Microsoft Edge
Mar 06, 2024 am 11:49 AM
Adakah anda tahu di mana Microsoft Edge ditetapkan untuk memaparkan butang muat turun di bawah, editor akan membawakan anda kaedah menetapkan butang muat turun untuk dipaparkan dalam Microsoft Edge Saya harap ia akan membantu anda tentangnya! Langkah 1: Mula-mula buka Pelayar Microsoft Edge, klik logo [...] di sudut kanan atas, seperti yang ditunjukkan dalam rajah di bawah. Langkah 2: Kemudian klik [Settings] dalam menu pop timbul, seperti yang ditunjukkan dalam rajah di bawah. Langkah 3: Kemudian klik [Penampilan] di sebelah kiri antara muka, seperti yang ditunjukkan dalam rajah di bawah. Langkah 4: Akhir sekali, klik butang di sebelah kanan [Tunjukkan Butang Muat Turun] dan ia akan bertukar daripada kelabu kepada biru, seperti yang ditunjukkan dalam rajah di bawah. Di atas ialah tempat editor membawa anda cara menyediakan butang muat turun dalam Microsoft Edge.
Bagaimana untuk melaksanakan kesan tatal skrin penuh dalam Vue
Nov 08, 2023 am 08:42 AM
Bagaimana untuk mencapai kesan tatal skrin penuh dalam Vue Dalam reka bentuk web, kesan tatal skrin penuh boleh membawa pengguna pengalaman menyemak imbas yang sangat unik dan lancar. Artikel ini akan memperkenalkan cara untuk mencapai kesan tatal skrin penuh dalam Vue.js, serta contoh kod khusus. Untuk mencapai kesan tatal skrin penuh, kita perlu menggunakan rangka kerja Vue.js untuk membina projek. Dalam Vue.js, kita boleh menggunakan vue-cli untuk membina rangka projek dengan cepat. Kemudian kita perlu memperkenalkan beberapa perpustakaan pihak ketiga untuk mencapai kesan penatalan, seperti halaman penuh
