本人很少做移动端的东西，这是一个小伙伴发过来的案例。功能很明确，就是点击左侧菜单，右侧内容对应滚动指定；右侧内容滚动，左侧菜单对应高亮。
点单的简易页面，emmmm..简洁得特别简陋
一、 问题描述
这个demo有两处问题：
1. 点击切换左侧菜单时，由于右侧内容滚动也触发了scroll事件，导致互相影响；
造成的菜单栏闪烁问题
2. 由于滚动高度的限制，点击左侧6/7/8菜单时，右侧对应的内容不会置顶 （当然，这个特征在目前各大外卖平台的产品设计就是不让置顶，但此处设计就是想点谁谁up）。
滚动高度限制
二、问题分析与解决
1.事件冲突问题
这个问题我们可以考虑，在左侧菜单点击触发动画前，禁用右侧滚动事件，等动画结束后再启动右侧滚动事件。具体实现，可以通过一个标志来设定。 如下代码，添加3行：
代码语言：javascript复制 // 左侧菜单点击事件
$(".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下。 最后的代码效果如下：
最终页面效果
