Implement content scrolling effect based on iScroll-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Implement content scrolling effect based on iScroll

亚连

May 26, 2018 pm 05:03 PM

content scroll

This article mainly introduces the content scrolling effect based on iScroll in detail, which has certain reference value. Interested friends can refer to it

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 implement functions such as zooming, pull-to-refresh, precise element capture, and customized scroll bars. 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>

Copy after login

Note: 1. iScroll must contact the wrapper outside the scrolling content to have an effect.
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>

Copy after login

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>

Copy after login

4. Running effect

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Simple application based on Ajax form submission and background processing

Ajax is simple to upload pictures and preview them Implementation

Summary of file upload skills based on ajax html

# #

The above is the detailed content of Implement content scrolling effect based on iScroll. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn