ok~_~ok 2022-08-18 18:14 采纳率: 80%
浏览 107
已结题

如何理解点击侧边栏菜单,滚动到指定选项卡的这个判断条件

源码在: https://gitee.com/y_project/RuoYi/blob/v2.2/src/main/resources/static/ruoyi/index.js#L86
演示地址在: http://demo.ruoyi.vip/

scrollToTap(element)主要是在处理scrollVal,通过三个不同的 if语句控制 scrollVal 的值滚动到指定选项卡。第一个 if 语句好理解,如果 tab 栏的可视区域(visibleWidth)大于所有 tab 的宽度,说明可视区域能放得下所有的 tab ,则无需滚动。

第一个if语句
if ($(".page-tabs-content").outerWidth() < visibleWidth) {
    scrollVal = 0
}

问题是应该怎么理解下面的两个 if 语句?

img

img

  • 写回答

2条回答 默认 最新

  • ZionHH 2022-08-19 11:14
    关注

    img

          //滚动到指定选项卡  
          function scrollToTab(element) {
            var marginLeftVal = calSumWidth($(element).prevAll()),
                marginRightVal = calSumWidth($(element).nextAll());
    
            // 可视区域非tab宽度
            var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".menuTabs"));
            //可视区域tab宽度
            var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
            //实际滚动宽度
            var scrollVal = 0;
            if ($(".page-tabs-content").outerWidth() < visibleWidth) {
              scrollVal = 0;
            } else if (marginRightVal <= (visibleWidth - $(element).outerWidth(true) - $(element).next().outerWidth(true))) {
              // 右边tab总宽 <= 可视区 - 点击tab宽 - 后一个tab宽:这里就是右边tab宽度足够放在可视区域,再看下面的判断
              if ((visibleWidth - $(element).next().outerWidth(true)) > marginRightVal) {
                // 可视区域 - 后一个tab宽 > 右边tab宽:向左滚动左边tab总宽,再看下面while语句
                scrollVal = marginLeftVal;
                var tabElement = element;
                while ((scrollVal - $(tabElement).outerWidth()) > ($(".page-tabs-content").outerWidth() - visibleWidth)) {
                  // 滚动距离 - tab宽 > tabs总宽 - 可视区:这里是为了将右边的tab保持在可视区域内,动态计算向左滚动的距离
                  scrollVal -= $(tabElement).prev().outerWidth();
                  tabElement = $(tabElement).prev();
                }
              }
            } else if (marginLeftVal > (visibleWidth - $(element).outerWidth(true) - $(element).prev().outerWidth(true))) {
              // 左边tab总宽 > 可视区域 - 点击tab宽 - 前一个tab宽:说明左边tab宽度足够支持向左滚动
              scrollVal = marginLeftVal - $(element).prev().outerWidth(true); // 向左滚动,保留前一个在可视区域内
            }
            $('.page-tabs-content').animate({
              marginLeft: 0 - scrollVal + 'px'
            },
              "fast");
          }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 8月31日
  • 已采纳回答 8月23日
  • 赞助了问题酬金10元 8月18日
  • 创建了问题 8月18日

悬赏问题

  • ¥15 广告联盟的兜底广告是什么意思
  • ¥15 如何证明高斯噪声的包络公式
  • ¥150 寻找王者荣耀开发作者,合作或者解答
  • ¥15 乳腺癌数据集 相关矩阵 特征选择
  • ¥15 我的游戏账号被盗取,请问我该怎么做
  • ¥15 通关usb3.0.push文件,导致usb频繁断连
  • ¥15 有没有能解决微信公众号,只能实时拍照,没有选择相册上传功能,我不懂任何技术,,有没有给我发个软件就能搞定的方法
  • ¥15 Pythontxt文本可视化
  • ¥15 如何基于Ryu环境下使用scapy包进行数据包构造
  • ¥15 springboot国际化