Home >Web Front-end >JS Tutorial >Detailed explanation of the steps to implement content scrolling with iScroll (with code)

Detailed explanation of the steps to implement content scrolling with iScroll (with code)

php中世界最好的语言Original: 2018-05-03 16:16:391790browse

This time I will bring you a detailed explanation of the steps to implement content scrolling with iScroll (with code). What are the precautions for iScroll 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

The blogger has just started to learn. Partial content scrolling is only the most basic function of iScroll. Next, the blogger will try to pull refresh and other functions.

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 the steps to implement content scrolling with iScroll (with code)

Related articles