标签: iscroll
如何在Android上的WebView中提高JS可拖动菜单的性能
我们在Android上的WebView中显示了一个Web应用程序,我们确实需要处理旧版Android平板电脑上的性能问题
- 我们正在使用iScroll-lite进行javascript拖动
- 我们将硬件加速设置为true,将渲染优先级设置为高,WebView只允许80ms间隔内的一个MOVE触摸事件
我们还能做些什么吗？
有没有比iScroll-lite更快的替代方案？
我们不知道究竟是什么让它如此缓慢.例如,它可以在手机索尼Erricson上运行1 GHz,512 MB RAM与Android 2.3顺利运行,但在平板电脑Qualcomm 1GHz,512 RAM与Android 4.0你拖延,你实际上必须等待看到任何结果.我在Android版本和屏幕分辨率中看到的唯一区别.
推荐指数
解决办法
查看次数
改善大型桌面上的iScroll性能
我正在根据用户如何滚动以保持它们对齐来以编程方式更新表头及其第一列位置.
我遇到的问题是,只要我的数据集足够大,滚动就会变得越来越不稳定/不太平滑.
相关代码位于小提琴的最底层:
iScroll.on('scroll', function(){
var pos = $('#scroller').position();
$('#pos').text('pos.left=' + pos.left + ' pos.top=' + pos.top);
// code to hold first row and first column
$('#scroller th:nth-child(1)').css({top: (-pos.top), left: (-pos.left), position:'relative'});
$('#scroller th:nth-child(n+1)').css({top: (-pos.top), position:'relative'});
// this seems to be the most expensive operation:
$('#scroller td:nth-child(1)').css({left: (-pos.left), position:'relative'});
});
我知道通过缓存元素等可以更好地编写这些内容.例如,我尝试将元素保存到数组中,并以更"香草"的方式更新它们的位置:
headerElements[i].style.left = left + 'px'; // etc...
无论我多快地进行回调,我对结果仍然不满意.你有什么建议吗？
推荐指数
解决办法
查看次数
如何在手机空白中使用iscroll javascript？
我已经尝试为我的应用程序实现iscroll java脚本作为CSS 位置的补救过程:修复了在使用cordova 2.1.0的 android 2和3版本中不起作用
我从这里复制了iscroll-lite的javascript
HTML代码
<div id="wrapper" class="wrapper">
<div id="wrapper-container" class="wrapper-container">
<div id="header" class="header">
<div id="header_title" class="header_title"> </div>
<div id="abc" class="abc"><img src="img/abc.png""/> </div>
</div>
<div id="images" class="images"><img name="slide" src="img/abc.png" width=100%; />
</div>
<div id="description" class="description">
<div id="title" class="title">
<h1><strong></strong></h1>
</div>
<div id="desc" class="desc">
</div>
</div>
<div id="footer" style="background-image:url(img/bar.png);" class="footer">
<div id="footer_text" class="footer_text">footer_text</div>
<div id="image" class="image noSelect"><img src="img/info.png" onclick="info()"/></div>
</div>
</div>
desc标签的内容将溢出
CSS
.wrapper
{
position: absolute; width:auto; margin:0 auto; height:100%; overflow: …推荐指数
解决办法
查看次数
在移动浏览器上启用iScroll中的单击事件
我正在使用iScroll创建一个Web应用程序,我无法单击iscroll包装器中的任何div.我尝试将eventPassthrough选项设置为true但它会导致大量滚动问题.
有人经历过吗？
编辑:我正在使用iScroll 5.点击事件工作chrome,firefox和safari但不是ios mobile safari.
推荐指数
解决办法
查看次数
如何使用iscroll和Android WebView将焦点字段引入视图
当我将焦点放在iScroll视图底部的表单域时,它不会向上/向上移动/将焦点字段带到softkeyboad上方.任何的想法？谢谢!
这是Android项目. https://dl.dropboxusercontent.com/u/75818136/webkitdemo.zip
<!DOCTYPE html>
<html>
<head>
<meta 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">
<title>iScroll demo: simple</title>
<style type="text/css" media="all">
body,ul,li {
padding:0;
margin:0;
border:0;
}
body {
font-size:12px;
-webkit-user-select:none;
-webkit-text-size-adjust:none;
font-family:helvetica;
}
#header {
position:absolute; z-index:2;
top:0; left:0;
width:100%;
height:45px;
line-height:45px;
background-color:#d51875;
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
padding:0;
color:#eee;
font-size:20px;
text-align:center;
}
#header a {
color:#f3f3f3;
text-decoration:none;
font-weight:bold;
text-shadow:0 -1px 0 …推荐指数
解决办法
查看次数
jQuery mobile + iScroll,无法向下滚动
我正在尝试将jQuery Mobile与iScroll 4集成.我知道已经有一个项目可以做到这一点,但是,由于输入元素的错误(在打字时页面跳得像疯了),我正在避免它.
我目前的实现如下:
http://jsfiddle.net/AqHsW/ -(JSFiddle示例) [替代镜像 ]
正如你可能已经注意到的那样,除了一个主要问题之外,这个工作完美无瑕: 一个人无法向下滚动.这个问题似乎是跨操作系统/浏览器.
但是,如果我的覆盖onBeforeScrollStart方法:
var scroller = new iScroll('wrapper', { onBeforeScrollStart: null });
它的效果要好一些.现在可以滚动,但行为变得很脆弱(同时响应速度慢),允许用户滚动他想要的高度等等.
(这样做似乎只会改变iOS上的内容)
我现在正在寻找这个问题的解决方案,它最好支持iOS 5和6,以及<input>元素的使用.考虑到iScroll和jQuery Mobile是当今两个主导框架,这应该是一个非常普遍的问题.
推荐指数
解决办法
查看次数
在iOS 7全屏web应用程序上打破webkit-overflow-scrolling表单
我在iOS7上使用全屏(保存到主屏幕)的iPhone网络应用程序时遇到问题.
通常,当选择输入时,它已滚动到键盘上方的视图中.
但是,iOS7上似乎没有在全屏幕Web应用程序中滚动DIV.
因此,当DIV使用"-webkit-overflow-scrolling:touch"并且单击屏幕下半部分的输入时,键盘会被触发,但输入不会向上滚动.
并且,在那时,输入将不响应任何进一步的onFocus事件,否则我可以将其向上滚动.
有人看过一个解决方法吗？
推荐指数
解决办法
查看次数
如何自动检测iScroll的需求？
该iScroll项目提供了" overflow:scroll移动WebKit的 ",并开始
[...]因为用于iPhone的webkit不提供在固定大小(宽度/高度)div内滚动内容的本机方式.所以基本上不可能有一个固定的页眉/页脚和滚动的中心区域.
我们已经开发了一个移动友好的Web应用程序,使用响应式设计(等),使用的布局,有时在手机上显示一个固定的页眉和页脚的基础上,核心布局库,又使用角iscroll.
您可以在桌面和移动设备上试用核心布局演示,并尝试打开和关闭iScroll的使用.在桌面滚动时,不同区域应该使用和不使用iScroll(假设窗口不是太高,因此不需要滚动); 但是,在移动设备上,滚动是否在没有iScroll的情况下工作取决于浏览器的种类和版本.
最近版本的移动Safari浏览器和Android浏览器已经开始支持如上所述的overflow:scroll这种固定大小的div元素.因此,有些浏览器仍然需要使用iScroll才能工作,而其他浏览器则不需要.因为使用iScroll会引入一些问题,比如正确的点击和触摸事件处理,我想在所有不需要它的浏览器中关闭iScroll.
我想在angular-iscroll或core-layout中添加支持,以自动检测是否需要为打开页面的每个浏览器使用iScroll.我知道像modernizr这样的特征检测库,但似乎很难确定是否需要基于特征检测的iScroll.
有谁知道如何实现这种自动检测？
另一种可能性是使用白/黑名单并检查浏览器版本,但在这种情况下我想知道是否有人有一个可靠的规则集来正确确定是否需要使用基于用户代理字符串的iScroll？
披露:我是angular-iscroll和core-layout的作者.
2016-01-10更新:
既然没有人提出任何答案,我想我可以分享一些我如何解决这个问题的想法:
如果通过真正的特征检测很难实现上述问题的解决方案,一种可能的方法是利用platform.js,这是一个几乎适用于所有JavaScript平台的平台检测库.通过包含
platform.js脚本,您可以轻松访问有关当前浏览器的信息,例如
Run Code Online (Sandbox Code Playgroud)// On an iPad platform.name; // 'Safari' platform.version; // '5.1' platform.product; // 'iPad' platform.manufacturer; // 'Apple' platform.layout; // 'WebKit' platform.os; // 'iOS 5.0' platform.description; // 'Safari 5.1 on Apple iPad (iOS 5.0)'可用于匹配规则集.但是, …
推荐指数
解决办法
查看次数
iframe阻止了移动Safari上的iScroll滚动
我在我的移动启用网站上使用iScroll(在这里使用iPhone)在div内滚动.
在这个div中,我有一个像这样固定高度的iframe:
<body>
<div id="iscroller">
<iframe id="theIframe"></iframe>
Other stuff
</div>
</body>
现在,在div中滚动时,一切都按预期工作,但是当iframe上的滚动手势开始时我无法滚动.
这个问题在这里描述得很好:https://github.com/cubiq/iscroll/issues/41
所以,我通过应用pointer-events:noneiframe 来使用该帖子中的css解决方法.
现在滚动工作完美但我无法点击iframe中定义的任何链接,因为iframe上的所有点击/触摸事件似乎都被阻止了pointer-events: none.
所以我认为:
"好的,当用户滚动时,我需要
pointer-events:none.如果他没有滚动(而是点击),我必须设置pointer-events:auto才能让点击/触摸事件通过."
所以我这样做了:
CSS
#theIframe{pointer-events:none}
JavaScript的
$("#theIframe").bind("touchstart", function(){
// Enable click before click is triggered
$(this).css("pointer-events", "auto");
});
$("#theIframe").bind("touchmove", function(){
// Disable click/touch events while scrolling
$(this).css("pointer-events", "none");
});
即使添加此功能也不起作用:
$("#theIframe").bind("touchend", function(){
// Re-enable click/touch events after releasing
$(this).css("pointer-events", "auto");
});
无论我做什么:滚动不起作用或点击iframe内的链接不起作用.
不行.有任何想法吗？
推荐指数
解决办法
查看次数
升级到iScroll5后,iScroll on ios不起作用
我有一个用于ipad的cordova应用程序,它使用iScroll在页面之间滚动.
一切正常,直到我升级到iScroll5.我改变了我的代码,使用新的构造函数和参数,但它仍然无效.它根本不滚动.
我不知道我是否遗漏了一些明显的东西,但我找不到有关升级的详尽文档.
这是我之前使用它的一个例子(iScroll4):
var options = {hScroll:false, hScrollbar:false, snap:true, onScrollEnd: updatePages(), momentum: false};
var scroller = new iScroll("wrapper", options);
这就是我现在使用它的方式(iScroll5):
var options = {scrollX: false, snap: true, momentum: false};
var scroller = new IScroll("#wrapper", options);
scroller.on("scrollEnd", updatePages());
任何帮助是极大的赞赏!谢谢!
推荐指数
解决办法
查看次数