Mouse & Touch 수평 분할 슬라이딩

Question

사용자가 mousemove 및 touchmove 이벤트를 사용하여 div 컨텐츠를 가로로 스크롤 할 수있는 웹 사이트 기능을 만들려고합니다 (Apple AppStore any app Screenshots section과 유사 함). 나는 첫 번째 아이에게 음수 여백 왼쪽 속성을 설정하여이를 수행합니다. 모바일 장치의 사용자가 화면을 터치하거나 바탕 화면에서 부모 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 답변으로 나는 더 쉽게 할 수 있다고 생각했습니다. 그래서 중첩 된 용기에 전체 내용을 넣어 내 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; 
    } 
    } 
} 

를이 코드로 내가 JS에서하는 TouchMove 이벤트가 필요하지 않습니다.

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

작업 fiddle

: 그래서 지금 내 JS 코드 같은 아래에 보이는 (BTW, 나는 마지막에 관해서는이 코드를 optimalized)

Answer 2

이미지 주위에 두 번째 래퍼 요소를 만들어서 자바없이 원하는 것을 얻을 수 있습니까?

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