Mouse＆Touch horizo​​ntal div sliding

Question

私はmousemoveとtouchmoveイベント（これはApple AppStore any app Screenshots sectionに似ています）を使ってdivコンテンツを水平方向にスクロールできるようにするため、私のウェブサイトの機能を作ろうとしています。私は最初の子供のための負の余白左のプロパティを設定することによってこれをやっています。モバイルデバイス上のユーザーが画面に触れるときやデスクトップ上で親divにカーソルを移動したときに、現在の位置からスクロールしていないコンテンツが「ジャンプ中」であることを除いて、すべてが機能しています。私は現在のmargin-left値を新しいpageX値に加えてこれをしようとしましたが、動作しません。私は間違っているの？または、この方法でこのようにすることはできませんか？

JS /バベルコード：

class Collage { 
    constructor(selector) { 
    this.selector = $(selector); 
    this.children = this.selector.children(':first-child'); 
    this.selector.on('mousemove touchmove', this.onMove.bind(this)); 
    } 

    onMove(event) { 
    const marginLeft = parseFloat(this.children.css('margin-left')); 
    let mouseX = event.pageX || -event.touches[0].pageX || -event.changedTouches[0].pageX; 

    const margin = calculateMargin(mouseX, 1); 
    this.children.css('margin-left', margin); 

    function calculateMargin(value, speed) { 
     let val = -value*speed; 
     return val <= 0 ? val : 0; 
    } 
    } 
} 

SCSSコード：あなたの答えを事前に

.collage { 
    overflow: hidden; 
    max-height: 300px; 

    white-space: nowrap; 

    font-size: 0; 

    img { 
    display: inline-block; 
    &:first-of-type { 
     margin-left: -20%; 
    } 
    } 
} 

マイfiddle

感謝。

Answer 1

。 Matthew Levy's答えで、私はそれがより簡単にできることを理解しました。

.collage { 
    overflow: hidden; 
    -webkit-overflow-scrolling: touch; 

    width: 100%; 
    max-height: 300px; 

    font-size: 0; 

    .wrapper { 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    padding: 0; 
    white-space: nowrap; 
    } 

    img { 
    display: inline-block; 
    &:first-of-type { 
     // transition prevent jumping when user move cursor into container 
     transition: margin .8s; 
    } 
    } 
} 

このコードでは、私はJSでtouchmoveイベントは必要ありません。だから私は、以下のようになります。ネストされたコンテナと私のCSS（SCSS）コードに全内容を置きます。だから今、私のJSコードは（ところで、私は最後の1に関して、このコードをoptimalized）以下のようになります。

fiddle

作業

class Collage { 
    constructor(selector) { 
    this.selector = $(selector); 
    this.child = this.selector.children(); 

    const offsetHeight = this.child[0].offsetHeight; 
    const clientHeight = this.child[0].clientHeight; 
    // hide scrollbar - it can be done with CSS but in various browsers scrollbar may has various size so using JS to deal with this is safier 
    this.selector.css('margin-top', -(offsetHeight - clientHeight)); 
    this.child.css('margin-top', offsetHeight - clientHeight); 

    this.child.on('mousemove', this.onMove.bind(this)); 

    this.mouseX = 0; 
    this.marginLeft = 0; 

    this.selectorWidth = this.selector.width(); 
    this.selectorLeft = this.selector.position().left; 
    } 

    onMove(event) { 
    // calculate new margin value in percentages 
    const calculateMargin =() => parseInt((100 * (this.mouseX - this.selectorLeft))/this.selectorWidth); 

    this.mouseX = event.pageX; 
    // limit a new value between 0/100% 
    this.marginLeft += (Math.min(Math.max(calculateMargin(), 0), 100) - this.marginLeft); 
    this.child.children(':first-child').css('margin-left', `-${this.marginLeft}%`); 
    } 
} 

Answer 2

イメージの周りに2番目のラッパー要素を作成することで、Javascriptを使用せずに必要なものを手に入れることはできますか？

<div class="collage"> 
    <div class="wrapper"> 
    <img /> .... 
</div> 
</div> 

その後、CSS、私はこの問題に対処

.collage { 
    overflow-x: scroll; 
    -webkit-overflow-scrolling: touch; 
    width: 100%; 
    display: block; 
    position: relative; 
} 
.wrapper { 
    width: 10000px; 
    /* set width to something large 
    or set with Javascript to the calculated width of your images */ 
}