- >请转到编辑本课题的部分内容
我想同步两个div的滚动条,这就是我这样做的方式
var div1 = document.getElementById('element1'),
div2 = document.getElementById('element2');
div1.addEventListener('touchmove', scrolled, false);
div2.addEventListener('touchmove', scrolled, false);
function getscrollTop(node) {
return node.pageYOffset || node.scrollTop;
}
function scrolled() {
var node = this, scrollTop = getscrollTop(node);
var percentage = scrollTop / (node.scrollHeight - node.clientHeight);
var other = document.getElementById({
"element1": "element2",
"element2": "element1"
}[node.id]);
other.scrollTop = percentage * (other.scrollHeight - other.clientHeight);
};
Run Code Online (Sandbox Code Playgroud)
小提琴 - >用来scroll代替touchmove
但问题是它在低端设备中是闪烁的,并且希望在低端设备中使其平滑.
编辑
我使用下面的代码来平滑滚动
var children = document.querySelectorAll('.scrolldiv');
var getscrollTop = function(node) {
return node.pageYOffset || …Run Code Online (Sandbox Code Playgroud) 我正在尝试同步两个可滚动的DIVS滚动位置.
方法如下:
方法 - 1:滚动事件设置其他DIV的scrollTop.问题:滚动事件在最后执行,UI在iOS游戏中缓慢.
方法-2:使用setInterval同步两个滚动位置.问题:iOS在滚动期间不执行计时器功能,因此在末尾同步滚动位置.再次这更加缓慢.试过,计时器修复如许多博客中提到但仍然没有优雅.
方法-3 :尝试自定义滚动条,所以iScroll并尝试同步scroll事件,问题:这似乎更好但在iOS仍然是缓慢!
方法-4:尝试自定义滚动条,因此iScroll尝试同步scroll事件,问题:使用iScroll但使用计时器而不是取决于onScroll事件,但在touchmove期间,iOS正忙于提供动画而不是执行所需的计时器直到touchend.下面的代码指的是这种方法.它也很迟钝.
var active = .., other = ...
// active : active Scrolling element
// other : Element to be in sync with active
window.setInterval(function () {
var y;
if (active) {
y = active.y;
} else {
return;
}
var percentage = -y / (active.scrollerHeight - active.wrapperHeight);
var oscrollTop = percentage * (other.scrollerHeight - other.wrapperHeight);
if (-other.maxScrollY >= toInt(oscrollTop)) {
other.scrollTo(0, -toInt(oscrollTop));
}
}, …Run Code Online (Sandbox Code Playgroud) 我正在尝试在DIV元素上实现增长和缩小效果,这是有效但动画从左到右工作.想从中心做到.
下面我放置了代码,这里是小提琴
.elem {
position:absolute;
top : 50px;
background-color:yellow;
left:50px;
height:30px;
width:30px;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
-webkit-animation-name: grow;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: grow;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
}
@-webkit-keyframes grow {
from {
height:30px;
width:30px
}
to {
height:130px;
width:130px
}
}
@-moz-keyframes grow {
from {
height:30px;
width:30px
}
to {
height:130px;
width:130px
}
}
Run Code Online (Sandbox Code Playgroud)
我怎样才能做到这一点.
我有一个聊天应用程序,我需要存储个人联系人的聊天记录.目前我使用如下的普通数组存储在.txt文件中
var messages = [{_id:1, message : "Hello"}, {_id:$1, message : "Hello", }];
Run Code Online (Sandbox Code Playgroud)
如果它变大,我可以看到下面的问题.
在检索时,需要进行大量处理才能将其从txt格式转换回数组.
需要这么多缓存.
但是,我觉得它简化了搜索邮件.想知道这个结构是否有更好的替代方案.
注意:首选.txt文件而不是indexedDB或webSQL的原因是我不想处理存储限制.
我正在尝试使用Regex匹配函数调用,但是没有给出大型JS文件,其中相同函数的嵌套调用在里面.例如,下面是JS文件中的代码
abc('hello', function(){
abc('hello1', function(){
abc('hello2', function() {
// Does some!
});
});
});
Run Code Online (Sandbox Code Playgroud)
我想只匹配第一个调用来识别第一个参数.我正在寻找的最终结果是hello.所以像下面这样匹配第一个电话
.replace(/(?:\r\n|\r|\n)/g, '').match(/abc\s*[^\"\']*\"([^\"\']*)\"/);
Run Code Online (Sandbox Code Playgroud)
有什么建议吗?