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

Question

我在水平导航栏上放置一个右箭头按钮，当单击该按钮时，如果内容溢出，将使用JavaScript滚动到菜单的末尾。此箭头位于导航栏右侧的div中，当前模糊了最后一个链接的末尾。我认为在导航容器中添加一些填充可以解决问题，但事实并非如此，链接只会溢出到填充中。

这里突出显示了容器的填充链接，我给.Dashboard__sub-header__menu一个60px的右边填充：

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

＆＃13;

＆＃13;

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);
  })
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

就我个人而言，我会这样做。假设我完全理解你要在这里实现的目标。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;