小编red*_*edV的帖子

同步两个div滚动在iOS中并不流畅

- >请转到编辑本课题的部分内容

我想同步两个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)

javascript css3

7
推荐指数
2
解决办法
234
查看次数

如何使两个Div的同步滚动位置更平滑

我正在尝试同步两个可滚动的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)

javascript iscroll

6
推荐指数
1
解决办法
2190
查看次数

使用CSS3缩小和增长元素

我正在尝试在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)

我怎样才能做到这一点.

css3

4
推荐指数
1
解决办法
6512
查看次数

推荐的json数据结构将聊天记录存储在文本文件中

我有一个聊天应用程序,我需要存储个人联系人的聊天记录.目前我使用如下的普通数组存储在.txt文件中

var messages = [{_id:1, message : "Hello"}, {_id:$1, message : "Hello", }];
Run Code Online (Sandbox Code Playgroud)

如果它变大,我可以看到下面的问题.

  1. 在检索时,需要进行大量处理才能将其从txt格式转换回数组.

  2. 需要这么多缓存.

但是,我觉得它简化了搜索邮件.想知道这个结构是否有更好的替代方案.

注意:首选.txt文件而不是indexedDB或webSQL的原因是我不想处理存储限制.

json data-structures cordova

4
推荐指数
1
解决办法
2358
查看次数

将函数调用与JS Regex匹配

我正在尝试使用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)

有什么建议吗?

javascript regex

1
推荐指数
1
解决办法
922
查看次数

标签 统计

javascript ×3

css3 ×2

cordova ×1

data-structures ×1

iscroll ×1

json ×1

regex ×1