使用Skrollr滾動時正確向下移動div的方法？

我用這真棒Skrollr libary：https://github.com/Prinzhorn/skrollr（動畫上滾動）使用Skrollr滾動時正確向下移動div的方法？

到目前爲止，我有這個作爲我的實現：

<div class="band2 landing"> 
    <div class="container"> 
     <div id="inside" style="position:relative;height:700px" data-0="margin-top:0px" data-1000="margin-top:800px"> 
      <img src="/static/images/snappie.png" width="280px"> 
      <img src="/static/images/iphonehand.png" width="400px" style="float:right;margin-top:50px" data-0="margin-right:0px;" data-150="margin-right:190px" data-300="margin-right:0px;"> 
     </div> 
    </div><!-- end container --> 
</div><!-- end band landing -->

基本上我移動整個「內部」分區下的用戶時向下滾動。當用戶滾動一定數量的像素時，我會將頂部邊距增加一定量。

儘管這在技術上的作品，它會產生一些很奇怪的滾動，你可以看到在這裏的測試場地：http://snappiesticker.pythonanywhere.com/splash

看到滾動條顫抖和震動，以及如何其難如何滾過黃條？

我覺得像硬編碼這些像素值一般是不會去了解這一點的最好方式，並使用各種屏幕尺寸，瀏覽器等

什麼是應該做的正確的方式，當將土崩瓦解特別這個？任何skrollr專家？

來源

2015-07-12 BigBoy1337

而不是使用margin-top, margin-right等

嘗試使用transform:translate3d(0, 0, 0)的。

前兩個0是x和y座標，應該調整以匹配您設置的邊距效果。第三個0是z座標，它應該保持在0.

這樣你就可以一石二鳥。 transform:translate屬性對於瀏覽器來說更容易處理，並且3d支持硬件加速。希望這可以爲你解決問題。

來源

2015-07-14 20:50:50 Christian

hmm。現在查看測試網站：http://snappiesticker.pythonanywhere.com/splash。我試過用它，它似乎不順利滾動，只是跳。你確定transform：translate3d被skrollr支持嗎？ – BigBoy1337

對不起，我應該提到你應該爲它分配一個px值。所以這將是transform：translate3d（0px，0px，0px）; 你可以看到我在這個頁面上做了一個例子[getvenga]（http://getvenga.com）注意：向下滾動到Actionable Feedback部分並檢查元素。 – Christian

使用Skrollr滾動時正確向下移動div的方法？

回答

相關問題