PhoneGap中的滚动条？

Question

我是一名新手，正在学习Phonegap。我想在列表视图中展示从服务器收集的数据，并添加一个滚动条来实现滚动查看。请问如何在Phonegap中添加滚动条，并使滚动不卡顿？请指导我如何实现这个功能。

谢谢！

- SuReSh PaTi

---

你正在使用 jQuery Mobile 吗？ - Nima Abdollahzade

Answer 1

个人而言，我不喜欢iscroll..使用它时遇到了很多问题，所以我发现了另一种解决方案...你可以尝试这个：

1.) 将你的DIV溢出设置为自动（或滚动），并设置其高度..例如

    <div id="wrapper" style="overflow:auto; height: 200px">...content...</div>

我通常根据用户屏幕大小使用JavaScript计算高度。我从不为所有设备设置固定高度，这只是为了这个“演示”的目的。

2.) 添加此JavaScript：

<script>
function isTouchDevice(){
    try{
        document.createEvent("TouchEvent");
        return true;
    }catch(e){
        return false;
    }
}

function touchScroll(id){
    if(isTouchDevice()){ //if touch events exist...
        var el=document.getElementById(id);
        var scrollStartPos=0;

        document.getElementById(id).addEventListener("touchstart", function(event) {
            scrollStartPos=this.scrollTop+event.touches[0].pageY;
            event.preventDefault();
        },false);

        document.getElementById(id).addEventListener("touchmove", function(event) {
            this.scrollTop=scrollStartPos-event.touches[0].pageY;
            event.preventDefault();
        },false);
}
} 
</script>

3.) 如果您使用jQuery，请在页面加载时调用它：

$(document).ready(function() { 
   touchScroll("wrapper");
});

4.) 如果您想让滚动条可见，请定义以下CSS规则：

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #000;
} 

这已经经过测试，应该在任何Android设备（甚至旧型号）或iOS设备上完全相同（即使没有此解决方法也可以正常工作-但此解决方法不会破坏它）。您可以将其与包装元素的position:fixed或position:absolute结合使用...

您还可以尝试touchScroll函数，您可以添加一些缓动或甚至带有自动滚动的滑动检测等。但这是一个更高级的问题...

- j99

Answer 2

使用iscroll。

步骤

function loaded() {
  document.addEventListener('touchmove', function(e){ e.preventDefault(); });
  myScroll = new iScroll('scroller');
}
document.addEventListener('DOMContentLoaded', loaded);`

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

#wrapper 还需要一些类：

#wrapper {
  position:relative;
  z-index:1;
  width:/* your desired width, auto and 100% are fine */;
  height:/* element height */;
  overflow:/* hidden|auto|scroll */;
}

请查看此示例演示

- Arjun T Raj

---

已将iscroll.js添加到应用程序并包含在HTML中，但未能获取滚动条。 - SuReSh PaTi