iscroll 没有滚动条
Since we've had web browsers and JavaScript, we've been intent on replacing native browser functionalities, and for many reasons. Whether it be that the native look or functionality is ugly, doesn't work the same across browsers, or isn't as feature-rich as it should be, we've always pushed the browser's limits to do better. One functionality we've tried desperately to emulate is scrollbars. iScroll, a fairly new scrolling lib, has done an exceptional job in emulating scrolling both within desktop and mobile browsers. iScroll also allows for scrolling of elements with overflow on older versions of Mobile Safari. Let's have a look at iScroll!
由于我们拥有网络浏览器和JavaScript，因此出于许多原因，我们一直打算替换本机浏览器功能。 无论是本机外观还是功能丑陋，在浏览器中无法正常工作，还是功能不如应有的丰富，我们一直在努力提高浏览器的性能。 我们拼命尝试模仿的功能之一就是滚动条。 iScroll是一个相当新的滚动库，在模拟桌面和移动浏览器中的滚动方面做得非常出色。 iScroll还允许在较旧版本的Mobile Safari上滚动具有溢出的元素。 让我们来看看iScroll！
Desktop Demo 桌面演示 Mobile Demo 移动演示
(The HTML)
iScroll requires a two-DIV pattern for declaring where iScroll will be used. The first DIV is the wrapper, the second DIV is the scrollable area:
iScroll需要两个DIV模式来声明将在哪里使用iScroll。 第一个DIV是包装器，第二个DIV是可滚动区域：
<div id="wrapper">
<div id="scroller">
<div style="padding:15px 30px;"> <!-- padding for content -->
<!-- content goes here -->
</div>
</div>
</div>iScroll will create and inject the scrollbar within the wrapper DIV. The content is held within the scroller DIV.
iScroll将创建和注入内的滚动条wrapper DIV。 内容保存在scroller DIV中。
(The CSS)
The CSS is where iScroll can get a bit fuzzy. For iScroll to work optimally, both the wrapper and scroller DIVs need to be positioned absolutely and be styled to widths of 100%:
在CSS中，iScroll可能会变得有些模糊。 为了使iScroll最佳工作，包装器和滚动器DIV都必须绝对定位，并设置其宽度为100％：
#wrapper {
position:absolute;
z-index:1;
top:0;
bottom:0;
left:0;
width:100%;
overflow:auto;
}
#scroller {
position:absolute; z-index:1;
/* -webkit-touch-callout:none;*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
width:100%;
padding:0;
}As a result, the third DIV of the structure needs the contain enough padding-right to keep the text and scrollbar far enough way from each other. Be sure to position those elements properly or iScroll wont work at all (as I found out the hard way)!
结果，该结构的第三个DIV需要包含足够的填充权，以使文本和滚动条彼此之间保持足够的距离。 请确保正确放置这些元素，否则iScroll根本无法工作(因为我发现很困难) ！
(The JavaScript)
The most obvious piece of using iScroll is including its .js file:
使用iScroll最明显的部分是包括其.js文件：
<script type="text/javascript" src="iscroll/src/iscroll.js"></script>With iScroll now available within the page, the next step is creating the iScroll instance that suits the needs of your desired usage. The most simple of uses provides only the wrapper ID:
在页面中现在可以使用iScroll的情况下，下一步就是创建适合您所需用法的iScroll实例。 最简单的用法仅提供包装器ID：
var scroller = new iScroll('wrapper');Awesome; the page's native scrollbar disappears and is replaced by an iOS-style scrollbar! But like every good JavaScript lib, iScroll provides a host of features that allow you to customize your scrollbar. Options include setting flags for bounce, momentum, fade and hide settings, and whether scrollbars should be allowed both vertically and horizontally. Here's another example of how you can create a pull-to-refresh scrollbar:
太棒了 页面的本机滚动条消失，并由iOS样式的滚动条取代！ 但是，就像每个好JavaScript库一样，iScroll提供了许多功能，可让您自定义滚动条。 选项包括弹跳，动量，淡入和隐藏设置的设置标志，以及是否应允许垂直和水平滚动条。 这是如何创建拉动刷新滚动条的另一个示例：
var myScroll,
pullDownEl, pullDownOffset,
pullUpEl, pullUpOffset,
generatedCount = 0;
function pullDownAction () {
setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production!
var el, li, i;
el = document.getElementById('thelist');
for (i=0; i<3; i++) {
li = document.createElement('li');
li.innerText = 'Generated row ' + (++generatedCount);
el.insertBefore(li, el.childNodes[0]);
}
myScroll.refresh(); // Remember to refresh when contents are loaded (ie: on ajax completion)
}, 1000); // <-- Simulate network congestion, remove setTimeout from production!
}
function pullUpAction () {
setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production!
var el, li, i;
el = document.getElementById('thelist');
for (i=0; i<3; i++) {
li = document.createElement('li');
li.innerText = 'Generated row ' + (++generatedCount);
el.appendChild(li, el.childNodes[0]);
}
myScroll.refresh(); // Remember to refresh when contents are loaded (ie: on ajax completion)
}, 1000); // <-- Simulate network congestion, remove setTimeout from production!
}
function loaded() {
pullDownEl = document.getElementById('pullDown');
pullDownOffset = pullDownEl.offsetHeight;
pullUpEl = document.getElementById('pullUp');
pullUpOffset = pullUpEl.offsetHeight;
myScroll = new iScroll('wrapper', {
useTransition: true,
topOffset: pullDownOffset,
onRefresh: function () {
if (pullDownEl.className.match('loading')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
} else if (pullUpEl.className.match('loading')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
}
},
onScrollMove: function () {
if (this.y > 5 && !pullDownEl.className.match('flip')) {
pullDownEl.className = 'flip';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
this.minScrollY = 0;
} else if (this.y < 5 && pullDownEl.className.match('flip')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
this.minScrollY = -pullDownOffset;
} else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
pullUpEl.className = 'flip';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Release to refresh...';
this.maxScrollY = this.maxScrollY;
} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
this.maxScrollY = pullUpOffset;
}
},
onScrollEnd: function () {
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
pullDownAction(); // Execute custom function (ajax call?)
} else if (pullUpEl.className.match('flip')) {
pullUpEl.className = 'loading';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';
pullUpAction(); // Execute custom function (ajax call?)
}
}
});
setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
}Since we live in the world of AJAX-driven websites that allow content to come and go, calling the refresh method is all you need to do for iScroll to reevaluate the scrollbar position and size:
由于我们生活在AJAX驱动的网站的世界中，这些网站允许内容来来去去，因此iScroll只需重新调用刷新方法即可重新评估滚动条的位置和大小：
// When the AJAX is done, refresh the scrollbar sizing and positioning...
scroller.refresh();It's also important to point out that iScroll allows zooming and pinching, as well as snapping to elements:
同样重要的是要指出iScroll允许缩放和缩小以及捕捉到元素：
var myScroll = new iScroll('wrapper', {
/* snap: true, */ // Would snap logically
snap: "p", // Snaps to each "P" tag
momentum: false,
hScrollbar: false,
vScrollbar: false
});Lastly, iScroll-Lite is available for those looking to support only mobile browsers (iScroll allows for desktop support as well). The mischievous part of me would prefer iOS-style scrollbars instead of native browser scrollbars!
最后，iScroll-Lite适用于希望仅支持移动浏览器的用户(iScroll也支持桌面支持)。 我的调皮部分更喜欢iOS样式的滚动条，而不是本机浏览器的滚动条！
Desktop Demo 桌面演示 Mobile Demo 移动演示
Possibly my favorite part of iScroll is that it's a standalone library; no external JavaScript library is required. iScroll has many configuration parameters so I encourage you to visit the iScroll page to check out everything you can do. Matteo Spinelli's iScroll is an outstanding piece of work; grab iScroll and start controlling your scrollbars today!
我最喜欢的iScroll部分可能是它是一个独立的库。 无需外部JavaScript库。 iScroll具有许多配置参数，因此，我建议您访问iScroll页面以检查您可以做的所有事情。 Matteo Spinelli的iScroll是出色的作品； 抓住iScroll，立即开始控制您的滚动条！
iscroll 没有滚动条
