需求背景
今天運營給了一個需求，要做個引導頁，也就是全屏滾動。考慮到只有3張圖，就自己碼個吧！說幹就幹。
思路
- 設定一個外層container, 使用者的可見區域，也就是全屏
- container內有3個層次，每個層次大小都跟container一樣大小
- 每次滾動時候通過css的transform屬性進行偏移，並結合transition過渡一下效果
1234567891011121314151617181920212223242526*{margin: 0;padding: 0;}.container{position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 99999;overflow: hidden;}.scrollContainer{display: none;transition: all ease 1s;}.slide1{background-color: rgb(27, 188, 155);}.slide2{background-color: rgb(255, 153, 0);}.slide3{background-color: rgb(123, 170, 190);}
|
1 2 3 4 5 6 7 8 9 10 |
<div class="container"> <div class="scrollContainer"> <div class="slide slide1"> </div> <div class="slide slide2"> </div> <div class="slide slide3"> </div> </div> </div> |
scrollContainer是用來滾動內容的，所以在頁面進入的時候要獲取使用者區域
|
1 2 3 4 5 6 7 |
var $container = $('.container'); var $scroll = $container.find('.scrollContainer'); var height = $container.height(); var len = 3; var current = 1; $container.find('.slide').css('height', height + 'px'); $scroll.show(); |
邏輯部分
為了防止滾動多次滾動，需要通過一個變數來控制是否滾動，這裡的動畫是1s執行完，使用setTimeout延遲1s後解鎖，這樣大體邏輯差不多
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
// page控制器 var len = 3; var current = 1; var page = { isScrolling: false, next: function() { if((current + 1) <= len) { current += 1; page.move(current); } }, pre: function() { if(current -1 > 0) { current -= 1; page.move(current); } }, move: function(index) { page.isScrolling = true; var di = -(index-1)*height + 'px'; page.start = +new Date(); $scroll.css('transform', 'translateY('+di+')'); setTimeout(function(){ page.isScrolling = false; }, 1010); } }; // 滾動事件繫結 function bindMouseWheel (page) { var type = 'mousewheel'; var deltaY = 0; function mouseWheelHandle (event) { if (page.isScrolling) {// 加鎖部分 return false; } var e = event.originalEvent || event; deltaY = e.deltaY; if (deltaY > 0) { page.next(); } else if (deltaY < 0) { page.pre(); } } $(document).on('mousewheel', mouseWheelHandle); } |
差不多了，大體已經完成，在瀏覽器中執行也幾乎完美！但是我們是一家千牛應用，在千牛裡面執行，看似不錯，但是滑鼠快速移動就會出現閃屏、多滾動問題。
解決問題
出現這個問題，第一反應是程式碼寫錯了，沒有相容瀏覽器，但是一想千牛就是chrome核心，不需要寫相容程式碼啊！
方案1
不採用css動畫，採用jquery動畫。改變top值。
也嘗試了這個方案，選擇800毫秒效果相對最佳。
方案2
繼續思考一開始的思路為啥出現問題。經過老大提醒，並結合千牛之前出現的css動畫問題，感覺是動畫結束和js控制沒有達到一致。為了驗證這個假設，去除setTimeout延遲，新增webkitTransitionEnd事件，並列印出每次滾動時間。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// page控制更改 move: function(index) { page.isScrolling = true; var di = -(index-1)*height + 'px'; page.start = +new Date(); $scroll.css('transform', 'translateY('+di+')'); }, // 新增了滾動結束控制 moveEnd: function() { page.end = +new Date(); console.log('end', (page.end - page.start)/1000); page.isScrolling = false; } // 給新增滾動結束事件 $scroll.on('webkitTransitionEnd', page.moveEnd); |
最終結果了滾動出現的問題，再檢視每次滾動時間
|
1 2 3 4 |
end 1.022 end 1.055 end 2.344 end 2.273 |
在chrome裡面檢視滾動時間
|
1 2 3 4 5 6 7 8 |
end 0.999 end 0.994 end 1.006 end 1.023 end 0.991 end 0.997 end 1.005 end 1.046 |
結論
從結果來看在chrome裡面css動畫幾乎沒有延遲的跟設定1s過渡時間基本吻合，但是在千牛應用裡面能夠看出css動畫會受其他條件影響，比如上面所遇到的滑鼠滾動過快等因素。
所以在css動畫這方面就應該用css動畫事件來控制。除了過渡有且只有webkitTransitionEnd事件，動畫開始webkitAnimationStart，動畫結束事件webkitAnimationEnd，動畫重複運動事件 webkitAnimationIteration。後面再玩玩
本文原地址 http://xiaoqiang730730.github.io/2016/06/03/fullpage/
打賞支援我寫出更多好文章，謝謝！
打賞作者
打賞支援我寫出更多好文章，謝謝！
任選一種支付方式
