左側導航click，右側內容scroll——一個模擬外賣點單的簡易頁面

本人很少做移動端的東西，這是一個小夥伴發過來的案例。功能很明確，就是點選左側選單，右側內容對應滾動指定；右側內容滾動，左側選單對應高亮。

一、 問題描述

這個demo有兩處問題：
1. 點選切換左側選單時，由於右側內容滾動也觸發了scroll事件，導致互相影響；

2. 由於滾動高度的限制，點選左側6/7/8選單時，右側對應的內容不會置頂
（當然，這個特徵在目前各大外賣平臺的產品設計就是不讓置頂，但此處設計就是想點誰誰up）。

二、問題分析與解決

1.事件衝突問題

這個問題我們可以考慮，在左側選單點選觸發動畫前，禁用右側滾動事件，等動畫結束後再啟動右側滾動事件。具體實現，可以通過一個標誌來設定。
如下程式碼，新增3行：

            // 左側選單點選事件
            $(".menu-left").on('click','li',function(){
                $(".menu-right").attr("noscroll",true); // add line1 禁止右側滾動
                $(this).addClass('on');
                $(this).siblings('li').removeClass('on');
                $(".menu-right").animate({scrollTop:$(this).attr('scroll')},200,function(){
                    $(".menu-right").attr("noscroll",false); // add line2 啟動右側滾動
                });
            });

            // 右側分類滾動事件
            $(".menu-right").scroll(function(){
                if ($(this).attr("noscroll") == "true") return false; // add line3 根據標誌判斷是否執行滾動事件程式碼
                var scrTop=$(this).scrollTop();
                var index;
                ...
            });

2. 滾動高度不夠問題

既然高度不夠，我們就補上這個高度。這個問題的難點是要補多少的高度。
我們看下，想要最後一個分類能置頂，則需要再後面在追加如下圖的空白。那這個空白的高度是多少呢？
其實就等於（頁面高度 - 最後一個分類的高度）。

所以我們可以考慮，對右側分類的<ul id="listUl">標籤的外圍增加一個<div class="menu-right">來做over-flow:auto的設定，而<u id="listUl"l>則通過javaScript來設定合適的滾動高度。具體計算公式是：
合適的滾動高度 = 原本的滾動高度 + 頁面高度 - 最後一個分類的高度

            // 設定右側分類合適的滾動高度
            $("#listUl").css("height",$(".menu-right").get(0).scrollHeight + $(".menu-right").get(0).offsetHeight - $("#listUl li:last-child").outerHeight());

            console.log("整個滾動高度：" + $(".menu-right").get(0).scrollHeight);
            console.log("頁面高度（螢幕高度）：" + $(".menu-right").get(0).offsetHeight);
            console.log("最後一個分類高度（包含padding）：" + $("#listUl li:last-child").height());

修改後的程式碼在此。

三、小結

這個案例很簡單，遇到問題也是小問題，但處理思路還不錯，還是mark下。
最後的程式碼效果如下：