鼠標和觸摸水平div滑動

我想爲我的網站，它允許用戶使用mousemove和touchmove事件（它類似於蘋果AppStore any app Screenshots section）水平滾動div內容功能。我通過爲第一個孩子設置一個負餘量屬性來做到這一點。除了當移動設備上的用戶觸摸屏幕或在桌面上將光標移動到父div時，所有內容都在工作，它的內容不是從當前位置滾動，而是「跳躍」。我試圖通過將當前的margin-left值添加到新的pageX值來實現此目的，但它不起作用。我做錯了什麼？或者也許這樣做不可能做到這個功能？鼠標和觸摸水平div滑動

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

預先感謝您的回答。

來源

2016-10-07 ray

我處理這個問題。用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事件。所以，現在我的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}%`); 
    } 
}

工作fiddle

來源

2016-10-07 20:07:29 ray

你可以通過在圖像周圍創建第二個包裝元素來獲得你想要的沒有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 */ 
}

來源

2016-10-07 13:37:30

鼠標和觸摸水平div滑動

回答

相關問題