DOM Горизонтальная прокрутка с помощью прокрутки zynga

Question

Давайте начнем с объяснения того, чего я хотел достичь. Я работаю над мобильным проектом (используя Ionic, AngularJS и Cordova). Мне нужна страница (Вид), в которой будут перечислены сгруппированные элементы. Все элементы одной группы должны оставаться в одном ряду. Следовательно, строки, скорее всего, будут превышать ширину экрана, но это означает, что использование может прокручивать каждую группу в горизонтальном (x) направлении.

В то время как я искал работоспособное решение, которое я видел Zynga Scroller. Его Paging X-Axis выглядит так близко, но не совсем то, что я искал. В X-Axis Paging используется идентификатор DOM, что затрудняет прокрутку каждой группы независимо от другой.

Я пробовал модифицировать скрипты (X-Axe Paging) для достижения вышеуказанной цели без успеха.

часть кода (просто чтобы codepen ссылку):

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. Обратите внимание, что прокрутка по определенной группе прокручивает все группы (это не то, что я хочу).

Во-вторых, прокрутка никогда не запускается вообще, когда я подключаю ее к своему ионическому проекту.

/** 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 выше за вашу помощь. Я верю, что есть что-то, что я не получаю.

Ваша помощь будет принята с благодарностью.

Answer 1

И наконец FT Scroller сделал магию