左侧导航click，右侧内容scroll——一个模拟外卖点单的简易页面

celineWong7

发布于 2020-11-05 19:08:51

2K0

发布于 2020-11-05 19:08:51

文章被收录于专栏：web前端踩坑

本人很少做移动端的东西，这是一个小伙伴发过来的案例。功能很明确，就是点击左侧菜单，右侧内容对应滚动指定；右侧内容滚动，左侧菜单对应高亮。

点单的简易页面，emmmm..简洁得特别简陋

一、问题描述

这个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());

修改后的代码在此。