一、開場暖身
網上常見蹲來蹲去的小段子，比方說：“李代沫蹲，李代沫蹲，李代沫蹲完黃海波蹲；黃海波蹲，黃海波蹲，黃海波蹲完寧財神蹲；寧財神蹲，寧財神蹲，寧財神蹲完張耀揚蹲;張耀揚蹲，張耀揚蹲，張耀揚蹲完郭美美蹲;郭美美蹲，郭美美蹲，郭美美蹲完……”。應該源自“蘿蔔蹲，蘿蔔蹲，蘿蔔蹲完蘋果蹲……”。
在網頁中，滾動條的滾動行為也是類似的調調，如果頁面出現多個內嵌滾動條，則行為表現是：子元素滾，子元素滾，子元素滾完父元素滾；父元素滾，父元素滾，父元素滾完容器滾……
比方說下面：
在妹子臉上滾，先是妹子滾，妹子滾完主頁面滾，對吧~
//zxx: 別問為什麼不使用張含韻，因為張妹子照片是橫的，滾動空間小，曉得伐~
這是瀏覽器的預設行為，如果我們遇到了一個需求：子元素滾，子元素滾完，就完了，父元素不需要滾了。那該如何實現呢？
在PC端，OK，本文介紹的方法，值適用於PC端，移動端，咳咳，我15年就沒做過移動端專案，不好意思，手生，我也沒去研究。
二、阻止瀏覽器預設行為的特定套路
哈，本文標題有些拗口，實際上用一句話概括就是：如何阻止瀏覽器的預設滾動行為。
基本上，好像印象中就沒有例外的，阻止瀏覽器的預設行為，就一條(假設事件物件引數是event)：event.preventDefault().
這是標準規範使用方法。但是，對於老IE瀏覽器，event.returnValue = false. 如果你使用jQuery等框架，直接上面的event.preventDefault()就可以，庫已經幫你搞定了相容細節處理。
OK，回到本文。阻止預設滾動，也是類似，關鍵是找到準確的事件。
第一反應是scroll事件，不知道是不是我測試的方法不對，結果沒鳥用；其實想想也可以理解，scroll事件要觸發，尼瑪必須已經滾動了哈~
後來，發現要從滾動事件的源頭處理起來。在PC端，絕大多數滾動都是滑鼠滾動觸發的（上下快捷鍵也可以滾動頁面，但一般人不知道），因此，我們可以從滑鼠滾輪事件入手。
三、滑鼠滾輪事件
JS基礎知識的啦，mousewheel事件：
|
1 2 3 |
dom.onmousewheel = function() { // 嘿嘿嘿 }; |
IE, Chrome都認識，但是FireFox瀏覽器，要使用DOMMouseScroll, 具體知識呢我之前有寫過文章分析過：“JS滾輪事件(mousewheel/DOMMouseScroll)瞭解”。現在回過頭看看這篇文章，內容和點都挺好。但是，當時正好在學習模組化開發，以及JavaScript語言模式，所以，提供的程式碼，科科，不是拿來主義的調調，所以這篇文章沒有火啊~
扯遠了，總之呢，我們對滑鼠滾動這個事件，進行event.preventDefault()，頁面就像齒輪卡殼了一樣，滾不動了！
四、原理爬上來
找到了關鍵鑰匙，現在就要開門了。
子元素可以滾，父元素不能滾。
我們可以對子元素寫上滑鼠滾輪事件，對吧，的那個子元素滾動到邊界的時候，我們立馬插一刀event.preventDefault()。幹掉整個頁面的滾動，世界一下子安靜了，時間好像突然靜止了一般，好像很不錯的樣子哦！
於是，寡人我屁顛屁顛搞起程式碼(粗糙示意)：
|
1 2 3 |
if (direction == 'up' && scrollTop == 0) { event.preventDefault() } |
翻譯下就是：哥哥我往上滾，當滾到頭的時候，頁面滾動歇菜。
Chrome一測試，喔噢，好棒，鼓掌！ 
FireFox一測試，喔噢，好棒too，鼓掌again! 
IE一測試，喔噢，好…………尼瑪，滾蛋了~ 滾動高度直接跳過了0，直接把父元素給滾了。 
靠，什麼鬼？不相容，搞不定，怎麼辦？
五、臨界手動翻滾
就是說，我們不要到0或者最大滾動高度時候，再去阻止預設滾動，我們要在到達邊界的前一個滾動，就開始下手，手動滾動到邊界，同時event.preventDefault()阻止滑鼠滾動行為。於是，IE瀏覽器也棒棒噠了！
說實話，從開頭到現在，中文啪啪啪敲了這麼多，其實毛線用都沒有，從度娘或谷哥過來的同學需要的不是什麼神神叨叨的廢話，需要的只是下面這段可以直接拿來主義的程式碼，好吧，拿去吧——子元素滾完就滾完的方法原始碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
$.fn.scrollUnique = function() { return $(this).each(function() { var eventType = 'mousewheel'; // 火狐是DOMMouseScroll事件 if (document.mozHidden !== undefined) { eventType = 'DOMMouseScroll'; } $(this).on(eventType, function(event) { // 一些資料 var scrollTop = this.scrollTop, scrollHeight = this.scrollHeight, height = this.clientHeight; var delta = (event.originalEvent.wheelDelta) ? event.originalEvent.wheelDelta : -(event.originalEvent.detail || 0); if ((delta > 0 && scrollTop <= delta) || (delta < 0 && scrollHeight - height - scrollTop <= -1 * delta)) { // IE瀏覽器下滾動會跨越邊界直接影響父級滾動，因此，臨界時候手動邊界滾動定位 this.scrollTop = delta > 0? 0: scrollHeight; // 向上滾 || 向下滾 event.preventDefault(); } }); }); }; |
沒錯，依賴jQuery的一個擴充套件方法，上面程式碼只要拷貝到你頁面的JS中，然後，你希望哪個元素滾動到底，父級不滾動，直接：
|
1 |
$().scrollUnique(); |
就可以了，然後就可以打卡下班了。
對了，有個demo, 您可以狠狠地點選這裡：裡面元素滾動到底外部容器不滾動demo
如果您的顯示器豎屏，或者寬度1920的，會發現右側沒有大滾動條，則，麻煩大家手動高度改小，拉拉視窗啊，或者開啟控制檯之類的。
//zxx: 你問我什麼不加高頁面造一個滾動條？唉，捨不得把底部的廣告刻意藏在滾動條之外~
六、拋磚引玉
前文也提到，頁面滾動條滾動的事件源很多，不僅僅是滑鼠滾動，上下鍵，End鍵， Home鍵等都有滾動定位行為。因此，大家要想100%全方位封殺滾動行為，僅僅上面的滑鼠滾動程式碼是不夠的，但是，關鍵鑰匙已經給大家了，大家可以依次，按照自己的專案需求進行進一步深入擴充。
不過，我個人覺得，上面mousewheel處理已經足夠了，什麼鍵盤觸發滾動，讓他自己去玩耍吧，還是別折騰了，吃力不討好。
喲，寫完了，抬頭一看，一張截圖都沒有，這可不行，風水不能斷，搞一張。
恩，不錯，真正的無可挑剔的「截」圖。
