Мышь и касание горизонтального div скольжения

Question

Я пытаюсь сделать функцию для своего веб-сайта, которая позволяет пользователю горизонтально прокручивать содержимое div с помощью mousemove и touchmove событий (это похоже на Apple AppStore any app Screenshots section). Я делаю это, устанавливая отрицательное свойство margin-left для первого ребенка. Все работает, за исключением того, что когда пользователь на мобильном устройстве касается экрана или на рабочем столе, перемещает курсор в родительский div, контент не прокручивается с того места, где он сейчас находится, но он «прыгает». Я попытался сделать это, добавив текущее значение margin-left к новому значению pageX, но оно не работает. Что я делаю неправильно? Или, возможно, невозможно сделать эту функцию таким образом?

код JS/Babel:

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 я понял, что это можно сделать проще. Так что я положил все содержимое в контейнер вложен и мой CSS (SCSS) код выглядит следующим образом:

.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; 
    } 
    } 
} 

С помощью этого кода не нужно TouchMove события в JS. Так что теперь мой JS код выглядит, как показано ниже (кстати, я optimalized этот код в отношении последнего):

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}%`); 
    } 
} 

Working fiddle

Answer 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 */ 
}