防止水平导航内容溢出到填充中

Question

我在水平导航栏上放置了一个右箭头按钮，单击该按钮后，如果内容溢出，将使用 JavaScript 滚动到菜单末尾。该箭头位于导航栏右侧固定的 div 中，当前遮挡了最后一个链接的末尾。我认为向导航容器添加一些填充可以解决问题，但它没有，链接只是溢出到填充中。

这里是突出显示容器填充的链接，我在这里给.Dashboard__sub-header__menu 设置了 60px 的右侧填充：

我创建了一个jsfiddle 来尝试复制问题。

function buildHorizontalScrollArrow() {
  var el = jQuery('<div/>', {
    class: 'horizontal-scroll-arrow-container'
  })
  
  var el2 = jQuery('<div/>', {
    class: 'horizontal-scroll-arrow',
    text: '>'
  })
  
  return $(element).append(el2);
}

function addHorizontalScrollArrow(element) {
  var el = document.getElementsByClassName(el)[0];
  var arrowExists;
  
  if($('.horizontal-scroll-arrow').length) {
    arrowExists = true;
  } else {
    arrowExists = false;
  }
  
  if(el.offsetWidth < el.scrollWidth) {
    if(arrowExists == false) {
      $(el).append(buildHorizontalScrollArrow())
    }
  } else {
    if(arrowExists == true) {
      $('.horizontal-scroll-arrow').remove();
    }
  }
}

$(document).ready(function() {
  addHorizontalScrollArrow('Dashboard__sub-header__menu');
  
  $(window).on('resize', function() {
    addHorizontalScrollArrow('Dashboard__sub-header__menu');
  })
  
  $(document).on('click', '.horizontal-scroll-arrow', function() {
    $('.Dashboard__sub-header__menu').scrollLeft(1200);
  })
});

.Dashboard__sub-header__menu {
  width: calc(100% - 60px);
  height: 90px;
  background: #FFF;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  padding: 0 3em 0 3em;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.04), 0 1px 5px 0 rgba(0, 0, 0, 0.02);
   overflow-x: auto;
   position: fixed;
   border: 0;
   vertical-align: baseline;
   font-family: 'Noto Sans', sans-serif;
   font-size: 12px;
   box-sizing: border-box;
}

.Dashboard__sub-header__menu li {
  padding: 0 1.4em;
  height: 35px;
  line-height: 30px;
  cursor: pointer;
  list-style: none;
  letter-spacing: 0.02em;
  color: #999;
  text-decoration: none;
  white-space: nowrap;
}

.Dashboard__sub-header__menu li a {
  cursor: pointer;
  list-style: none;
  letter-spacing: 0.02em;
  color: #999;
  text-decoration: none;
  white-space: nowrap;
}

.horizontal-scroll-arrow-container {
  position: fixed;
  width: calc(100% - 60px);
  height: 40px;
  left: 0;
  box-sizing: border-box;
  margin-left: 9px; /* This is just for the Fiddle */
}

.horizontal-scroll-arrow {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 40px;
  width: 30px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  border-left: 2px solid rgba(0, 0, 0, 0.05);
  cursor: pointer;
  box-sizing: border-box;
}

<section class="Dashboard__sub-header__menu Active">
  <li class="main-nav-link">
    <a href="#">Institutions</a>
  </li>

  <li class="main-nav-link">
    <a href="#">Investigators</a>
  </li>

  <li class="main-nav-link">
    <a href="#">Site Contacts</a>
  </li>

  <li class="main-nav-link">
    <a href="#">Labs</a>
  </li>

  <li class="main-nav-link">
    <a href="#">IRBs/IECs</a>
  </li>

  <li class="main-nav-link">
    <a href="#">Regulatory/Competent Authorities</a>
  </li>

  <li class="main-nav-link">
    <a href="#">Organizations</a>
  </li>

  <li class="main-nav-link">
    <a href="#">Organization Contacts</a>
  </li>

  <div class="horizontal-scroll-arrow-container">
    <div class="horizontal-scroll-arrow">&gt;</div>
  </div>
</section>

Answer 1

我个人会这样做。假设我完全理解您在这里想要实现的目标。

section{
  position:relative;
  padding-right:15px;
}
.Dashboard__sub-header__menu {
  width: calc(100% - 60px);
  height: 90px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  padding: 0 0 0 3em;
  overflow-x: auto;
}

.Dashboard__sub-header__menu li {
  padding: 0 1.4em;
  height: 35px;
  line-height: 30px;
  white-space:nowrap;
}

.horizontal-scroll-arrow-container {
  position: fixed;
  width: 100%;
  height: 40px;
  left: 0;
}

.horizontal-scroll-arrow {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 40px;
  width: 30px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  border-left: 2px solid rgba(0, 0, 0, 0.05);
  cursor: pointer;
}

<section>
  <div class="horizontal-scroll-arrow-container">
    <div class="horizontal-scroll-arrow">&gt;</div>
  </div>
  
  <ul class="Dashboard__sub-header__menu Active">
    <li class="main-nav-link">
      <a href="#">Institutions</a>
    </li>

    <li class="main-nav-link">
      <a href="#">Investigators</a>
    </li>

    <li class="main-nav-link">
      <a href="#">Site Contacts</a>
    </li>

    <li class="main-nav-link">
      <a href="#">Labs</a>
    </li>

    <li class="main-nav-link">
      <a href="#">IRBs/IECs</a>
    </li>

    <li class="main-nav-link">
      <a href="#">Regulatory/Competent Authorities</a>
    </li>

    <li class="main-nav-link">
      <a href="#">Organizations</a>
    </li>

    <li class="main-nav-link">
      <a href="#">Organization Contacts</a>
    </li>
  </ul>

</section>