使用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中文网其它相关文章！
推荐阅读：
如何在实战项目中使用bootstrap+selectpicker下拉框
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
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
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
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
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
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
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
Bagaimana untuk menggunakan JavaScript untuk mencapai kesan tatal tidak terhingga yang dimuatkan secara automatik apabila menatal ke bahagian bawah halaman?
Oct 27, 2023 pm 06:30 PM
Bagaimanakah JavaScript mencapai kesan tatal tak terhingga untuk memuatkan secara automatik apabila menatal ke bahagian bawah halaman? Kesan tatal tak terhingga ialah salah satu ciri biasa dalam pembangunan web moden Ia boleh memuatkan lebih banyak kandungan secara automatik apabila menatal ke bahagian bawah halaman, membolehkan pengguna mendapatkan lebih banyak data atau sumber tanpa mengklik butang atau pautan secara manual. Dalam artikel ini, kami akan meneroka cara menggunakan JavaScript untuk mencapai fungsi ini dan menyediakan contoh kod khusus. Untuk mencapai kesan tatal tak terhingga memuatkan secara automatik apabila menatal ke bahagian bawah halaman, ia terbahagi terutamanya kepada yang berikut
Bagaimana untuk melaksanakan kesan pensuisan tatal imej dalam JavaScript?
Oct 20, 2023 pm 05:51 PM
Bagaimana untuk mencapai kesan pensuisan tatal imej dengan JavaScript? Dalam reka bentuk web moden, kesan pensuisan tatal imej ialah salah satu elemen reka bentuk yang biasa digunakan, yang boleh menambah dinamik dan kejelasan pada halaman web. JavaScript, sebagai bahasa skrip yang biasa digunakan, boleh membantu kami mencapai kesan ini. Dalam artikel ini, saya akan memperkenalkan kaedah untuk menggunakan JavaScript untuk mencapai kesan pensuisan tatal imej, dan memberikan contoh kod yang sepadan. Pertama, kita perlu menyediakan struktur HTML untuk memaparkan imej. generasi tertentu
Bagaimana untuk menggunakan JavaScript untuk memuatkan lebih banyak kandungan secara automatik apabila menatal ke bahagian bawah halaman web?
Oct 18, 2023 am 11:40 AM
Bagaimanakah JavaScript melaksanakan fungsi memuatkan lebih banyak kandungan secara automatik apabila menatal ke bahagian bawah halaman web? Gambaran Keseluruhan: Penatalan tanpa had ialah ciri biasa dalam aplikasi internet moden. Apabila pengguna menatal ke bahagian bawah halaman web, lebih banyak kandungan dimuatkan secara automatik, memberikan pengalaman pengguna yang lebih baik. JavaScript boleh membantu kami mencapai fungsi ini. Artikel ini akan memperkenalkan contoh kod khusus tentang cara menggunakan JavaScript untuk mendengar acara tatal pengguna dan memuatkan lebih banyak kandungan berdasarkan kedudukan tatal. Pelaksanaan khusus: Pertama, dalam HTM
Bagaimana untuk mencapai tatal lancar ke butang bawah dengan CSS
Nov 21, 2023 pm 05:11 PM
Cara menggunakan CSS untuk melaksanakan tatal lancar ke butang bawah Dalam reka bentuk web, untuk meningkatkan pengalaman pengguna, kita selalunya perlu menambah beberapa fungsi yang mudah, seperti butang untuk kembali ke bahagian atas halaman atau tatal ke bawah. Artikel ini akan memperkenalkan secara terperinci cara menggunakan CSS untuk melaksanakan tatal lancar ke butang bawah dan memberikan contoh kod khusus. Pertama, kita perlu menambah elemen butang pada HTML untuk mencetuskan fungsi tatal ke bawah. Anda boleh menggunakan teg atau teg <butang>, bergantung pada keperluan reka bentuk anda. wujud
