角度4光滑滾動內div

我試圖創建一個平滑的滾動效果，同時在一個點擊事件的分區內scrooling。我有點讓它工作，但我無法正確配置它。角度4光滑滾動內div

目標是創建一種旋轉木馬，當用戶點擊按鈕去右鍵，然後只有包含旋轉木馬項目的div水平滾動。

但是，當我點擊按鈕，滾動方式太順利，需要大約2-3秒才能完成。

這是我的代碼：

private parentEl; 

ngOnInit() { 
    this.parentEl = document.getElementsByClassName('carousel_wrap'); 
} 

public goRight(): void { 
    const el = this.parentEl[0]; 
    const endPosition = el.scrollLeft + this.scrollFactor; // scrollFactor is the width of the child items on the carousel 

    let interval = setInterval(() => { 
     el.scrollLeft++; 

     if (el.scrollLeft === endPosition) { 
      clearInterval(interval); 
     } 
    }); 
}

如果我給setInterval的延遲，如setInterval(() => {...}, 16);那麼它會需要更長的時間才能完成。例如，我期待的是在總共300毫秒內執行整個動畫。有誰知道如何解決這個問題？或者我做錯了什麼？

來源

2017-10-08 celsomtrindade

在您的setInterval的每一步中，您只需添加一個像素即可進行滾動。

你需要得到以像素爲單位的總距離要由時間來滾動和分裂，所以你將有速度（物理，誰還會想到！？）

public goRight(): void { 
    const el = this.parentEl[0]; 
    const endPosition = el.scrollLeft + this.scrollFactor; // scrollFactor is the width of the child items on the carousel 

    const time = 300; 
    const scrollVelocity = endPosition/time; 

    let interval = setInterval(() => { 
     el.scrollLeft += scrollVelocity; 

     if (el.scrollLeft >= endPosition) { 
      clearInterval(interval); 
     } 
    }); 
}

編輯：

正如我在評論中所說的，我把一個小小的jsFiddle展示瞭如何用css和scrollLeft結合來實現它。如果用戶不需要滾動scrollThft部分，則甚至可能會丟棄scrollLeft部分。

https://jsfiddle.net/y5m2xvzg/

總之，有一個與overflow:hidden和固定尺寸的外部元件。這裏面有內容，內容隨內容一起增長。當你go()，這個內部元素將使用CSS動畫。完成後，scrollLeft和transform屬性設置正確。

來源

2017-10-08 11:59:48

嗯，但在這種情況下，它不工作，因爲scrollVelocity會像0.375，並添加到scrollLeft位置後，它將回到0，因爲它不會添加分數值。 – celsomtrindade

隨着時間調整。嘗試30或甚至3。 –

其實，有一個更好的方法來實現這個目標，用CSS動畫。我正在演示一個小例子。使用滾動可以在每個間隔觸發重繪。 –

角度4光滑滾動內div

回答

相關問題