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

Question

源码在： 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 语句？

Answer 1

      //滚动到指定选项卡  
      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");
      }