Home >Web Front-end >JS Tutorial >Detailed explanation of content scrolling case using iScroll plug-in

Detailed explanation of content scrolling case using iScroll plug-in

php中世界最好的语言Original: 2018-05-09 10:27:321655browse

This time I will bring you a detailed explanation of the case of iScroll plug-in implementing content scrolling. What are the precautions for iScroll plug-in to implement content scrolling? The following is a practical case, let's take a look.

1. Introduction to iScroll

iScroll is a scrolling control for web apps. It can simulate the scrolling list operation in native IOS applications and can also achieve zooming. , pull to refresh, accurately capture elements, customize scroll bars and other functions. The version used by the blogger here is iScroll4.25. The latest version is iScroll5. You can download it from the official website.
Official website address: http://iscrolljs.com/

2. How to use iScroll

1.iScroll usage structure

The optimal structure for using iScroll is generally as follows:

HTML:

<p id="wrapper">
  <p id="scroller">
   <ul>
    <li></li>
    ...
   </ul>
   <ul>
    <li></li>
    ...
   </ul>
  </p>
 </p>

Note: 1. iScroll must be connected with the wrapper outside the scrolling content Contact will produce results.
2. Only the first child element in the wrapper can be scrolled.

2. Instantiate iScroll

iScroll must be instantiated before calling. The instantiation code is as follows (add the following code in the head tag) ：

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

3. Rolling test example

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>

4. Running effect

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Detailed explanation of content scrolling case using iScroll plug-in

Related articles