使用zynga滚动条进行DOM水平滚动

Question

让我先解释一下我想要实现的目标。我正在开展移动项目（使用Ionic，AngularJS和Cordova）。我需要一个列出分组项目的页面（View）。同一组中的所有项目都需要保持在同一行。因此，行最有可能跨越屏幕宽度，但如果使用可以在水平（x）方向上滚动每个组。

虽然，我正在寻找一个可行的解决方案，我看到Zynga Scroller。他的Paging X-Axis看起来如此接近，但并不完全是我想要的。分页X轴使用DOM id，这使得难以独立于另一组滚动每个组。

我尝试修改脚本（Paging X-Axis）以实现上述目标但没有成功。

部分代码（只是为了允许代码链接）：

var rect = container.getBoundingClientRect();

scroller.setPosition(rect.left + container.clientLeft, rect.top + container.clientTop);
scroller.setDimensions(container.clientWidth, container.clientHeight, content.offsetWidth, content.offsetHeight);

我创建了这个Pen to show what I have done。请注意，滚动特定组会滚动所有组（这不是我想要的）。

其次，当我将它插入我的Ionic Project时，滚动根本不会运行。

    /**  Original definitions **/
    //  var container = document.getElementById("container");          
    //  var content = document.getElementById("content"); 

    // I need mutiple containers with indepentent content scrollers,  indendent containers with contents and cell
    var containers = document.getElementsByClassName("scroller-container");
    var contents = document.getElementsByClassName("scroller-content");

    // Did this just to reproduce dom-paging-x.html demo
    var container = containers[0];
    var content = contents[0];

    // Initialize Scroller
    var scroller = new Scroller(AppFactory.render, {
        scrollingY: false,
        paging: true
    });


    // Setup Scroller

    var rect = container.getBoundingClientRect();

    scroller.setPosition(rect.left + container.clientLeft, rect.top + container.clientTop);
    scroller.setDimensions(container.clientWidth, container.clientHeight, content.offsetWidth, content.offsetHeight);

    /**  Original definitions **/
    //  var container = document.getElementById("container");          
    //  var content = document.getElementById("content"); 

    // I need mutiple containers with indepentent content scrollers,  indendent containers with contents and cell
    var containers = document.getElementsByClassName("scroller-container");
    var contents = document.getElementsByClassName("scroller-content");

    // Did this just to reproduce dom-paging-x.html demo, container and content required by some other scripts
    var container = containers[0];
    var content = contents[0];

    // Initialize Scroller
    var scroller = new Scroller(AppFactory.render, {
        scrollingY: false,
        paging: true
    });


    // Setup Scroller

    var rect = container.getBoundingClientRect();

    scroller.setPosition(rect.left + container.clientLeft, rect.top + container.clientTop);
    scroller.setDimensions(container.clientWidth, container.clientHeight, content.offsetWidth, content.offsetHeight);

我已经将Ionic Version上面的{{3}}写下来了。我相信我有些不对劲。

我们将非常感谢您的帮助。

Answer 1

最后FT Scroller做了神奇的