マウスとタッチを使ったdivの水平スクロール

Question

white-space: nowrap; divとoverflow: hidden;のdivがあるとします。そのコンテンツはもちろん、divよりもはるかに長く、公開されるためにはスクロールする必要があります。

私はthisライブラリを使用していましたが、タッチ入力付き携帯端末では機能しません。この機能を実装するための代替手段または方法をご存知ですか？

Answer 1

overflow-y: hidden;overflow-x: scroll;でコンテナdivを作成し、必要なあらかじめ決められた高さに設定します。

コンテンツを格納する内部divをposition:absolute;に設定し、コンテンツのサイズに合わせて幅を設定します。

コンテンツはマウスとタッチでスクロールします。

あなたはnetflixスタイルのサイドスクロールに行くようですね。このコーデープンをチェックしてみてください。これは私が今話していたことを示しています。

http://codepen.io/hoonin_hooligan/pen/aZBxRG

Answer 2

最後に、私の願いはfullfilledされます。ここでは、touchscroll.jsライブラリを変更してタッチサポートを有効にしました。

/* Modified dragscroll.js by Undust4able */ 
 

 
(function (root, factory) { 
 
    if (typeof define === 'function' && define.amd) { 
 
     define(['exports'], factory); 
 
    } else if (typeof exports !== 'undefined') { 
 
     factory(exports); 
 
    } else { 
 
     factory((root.dragscroll = {})); 
 
    } 
 
}(this, function (exports) { 
 
    var _window = window; 
 
    var _document = document; 
 
\t 
 
    var mousemove = 'mousemove'; 
 
    var mouseup = 'mouseup'; 
 
    var mousedown = 'mousedown'; 
 
\t 
 
\t var touchmove = 'touchmove'; 
 
    var touchup = 'touchend'; 
 
    var touchdown = 'touchstart'; 
 
\t 
 
    var EventListener = 'EventListener'; 
 
    var addEventListener = 'add'+EventListener; 
 
    var removeEventListener = 'remove'+EventListener; 
 

 
    var dragged = []; 
 
    var reset = function(i, el) { 
 
     for (i = 0; i < dragged.length;) { 
 
      el = dragged[i++]; 
 
      el = el.container || el; 
 
      el[removeEventListener](mousedown, el.md, 0); 
 
      _window[removeEventListener](mouseup, el.mu, 0); 
 
      _window[removeEventListener](mousemove, el.mm, 0); 
 
\t \t \t 
 
\t \t \t el[removeEventListener](touchdown, el.td, 0); 
 
      _window[removeEventListener](touchup, el.tu, 0); 
 
      _window[removeEventListener](touchmove, el.tm, 0); 
 
     } 
 

 
     // cloning into array since HTMLCollection is updated dynamically 
 
     dragged = [].slice.call(_document.getElementsByClassName('dragscroll')); 
 
     for (i = 0; i < dragged.length;) { 
 
      (function(el, lastClientX, lastClientY, pushed, scroller, cont){ 
 
       (cont = el.container || el)[addEventListener](
 
        mousedown, 
 
        cont.md = function(e) { 
 
         if (!el.hasAttribute('nochilddrag') || 
 
          _document.elementFromPoint(
 
           e.pageX, e.pageY 
 
          ) == cont 
 
         ) { 
 
          pushed = 1; 
 
          lastClientX = e.clientX; 
 
          lastClientY = e.clientY; 
 

 
          e.preventDefault(); 
 
         } 
 
        }, 0 
 
       ); 
 
\t \t \t \t (cont = el.container || el)[addEventListener](
 
        touchdown, 
 
        cont.td = function(e) { 
 
         if (!el.hasAttribute('nochilddrag') || 
 
          _document.elementFromPoint(
 
           e.pageX, e.pageY 
 
          ) == cont 
 
         ) { 
 
          pushed = 1; 
 
          e.preventDefault(); 
 

 
\t \t \t \t \t \t \t e = e.targetTouches[0]; 
 
          lastClientX = e.clientX; 
 
          lastClientY = e.clientY; 
 
          
 
         } 
 
        }, 0 
 
       ); 
 
       _window[addEventListener](
 
        mouseup, cont.mu = function() {pushed = 0;}, 0 
 
       ); 
 
\t \t \t \t _window[addEventListener](
 
        touchup, cont.tu = function() {pushed = 0;}, 0 
 
       ); 
 
       _window[addEventListener](
 
        mousemove, 
 
        cont.mm = function(e) { 
 
         if (pushed) { 
 
          (scroller = el.scroller||el).scrollLeft -= 
 
           (- lastClientX + (lastClientX=e.clientX)); 
 
          scroller.scrollTop -= 
 
           (- lastClientY + (lastClientY=e.clientY)); 
 
         } 
 
        }, 0 
 
       ); 
 
\t \t \t \t _window[addEventListener](
 
        touchmove, 
 
        cont.tm = function(e) { 
 
         if (pushed) { 
 
\t \t \t \t \t \t \t e = e.targetTouches[0]; 
 
          (scroller = el.scroller||el).scrollLeft -= 
 
           (- lastClientX + (lastClientX=e.clientX)); 
 
          scroller.scrollTop -= 
 
           (- lastClientY + (lastClientY=e.clientY)); 
 
         } 
 
\t \t \t \t \t \t 
 
        }, 0 
 
       ); 
 
      })(dragged[i++]); 
 
     } 
 
    } 
 

 
     
 
    if (_document.readyState == 'complete') { 
 
     reset(); 
 
    } else { 
 
     _window[addEventListener]('load', reset, 0); 
 
    } 
 

 
    exports.reset = reset; 
 
}));