jquery - Bootstrap - 在导航栏上添加带有滚动箭头的滑动菜单

Question

因为我有超过容器宽度的菜单，我试图添加带箭头的滑动滚动条，但我无法实现。首先，我无法让这些菜单显示在一行中，而且我无法在单击箭头时让菜单左右滑动。我尝试了一些 css 和 jquery 代码。那也行不通。请帮我。预先感谢。注意:请全屏查看 fiddle 以清楚地了解问题。

$(document).ready(function() {
  $(".chevron-right").on("click", function() {
    alert("click");
    $('.nav').animate({
      left: 100
    }, 'slow');
  })
  $(".chevron-left").on("click", function() {
    alert("click");
    $('.nav').animate({
      left: 100
    }, 'slow');
  })
})

.navbar-angle {
  position: relative;
}

.chevron-left {
  color: #ccc;
  font-size: 25px;
  position: absolute;
  right: 15px;
  bottom: 50%;
  transform: translate(0, 50%);
  cursor: pointer;
  z-index: 9;
}

.chevron-right {
  color: #ccc;
  font-size: 25px;
  position: absolute;
  z-index: 9;
  top: 50%;
  left: 15px;
  transform: translate(0, -50%);
  cursor: pointer;
}

<link href="https://cdn.paperindex.com/bootstrap/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.paperindex.com/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.paperindex.com/css/paperindex.css" rel="stylesheet">
<link href="https://cdn.paperindex.com/css/pi-header-n-footer.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.paperindex.com/js/jquery/jquery-3.1.0.min.js"></script>
<div class="navbar-angle">
  <i class="fa fa-chevron-right chevron-right" aria-hidden="true"></i>
  <i class="fa fa-chevron-left chevron-left" aria-hidden="true"></i>
  <nav class="navbar navbar-inverse mrgn-btm-0">
    <div class="container-fluid">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 4 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 5 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">bootstrapPage 6</a></li>
        <li><a href="#">bootstrapPage 7</a></li>
        <li><a href="#">bootstrapPage 8</a></li>
        <li><a href="#">bootstrapPage 9</a></li>
        <li><a href="#">bootstrapPage 10</a></li>
        <li><a href="#">bootstrapPage 11</a></li>
        <li><a href="#">bootstrapPage 12</a></li>
        <li><a href="#">bootstrapPage 13</a></li>
        <li><a href="#">bootstrapPage 14</a></li>
      </ul>
    </div>
  </nav>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

您正在尝试为 DOM 元素创建自定义水平滚动机制，而不显示滚动条并将左右滚动绑定(bind)到某些元素。我假设您希望它在任何设备上运行(最好能够在触摸设备上滑动)，并且我还假设您希望它在所有浏览器中运行，或者至少在现代浏览器中运行。

我不知道这对你来说有多明显，但这是一项非常复杂的任务，尤其是如果你想让自定义滚动条感觉自然、原生，自动停在边缘，可能在动画中有一点 flex 等等...所以我真的不明白你怎么假设询问SO并获得自定义脚本会产生比现有插件/库更好的插件/库，它们在开发上投入了更多时间，大多数都经过严格测试并准备好生产。

说起来，我会选择Malihu的custom scroller plugin为了工作。最初设计用于滚动图像，它非常强大且用途广泛，可用于任何类型的内容。但是，将它应用于您的菜单超出了我的回答范围。 你应该这样做，如果你遇到任何麻烦，到这里来就那个问题提出一个单独的问题。

---

我在最初尝试回答您的问题(参见下面的代码段)后写了上面的内容，但后来才意识到，当我实现了您的要求时，将其从概念验证转变为生产就绪的跨浏览器/跨设备脚本对于 Stack Overflow 的回答来说太多了。

$(document).ready(function() {
  let keepScrolling, 
  	scrollBy = 123,
    duration = 123,
    GetWidths = function(selector, i = 0) {
    	$(selector).each(function (index) {
        i += parseInt($(this).width(), 10);
        });
    return i;
    },
    currentMax = GetWidths('.navbar-angle .navbar-nav > li') - $(window).width();

  function navScrollTo(direction = true) {
    let
      menu = $('.navbar-angle nav'),
      scroller = $('li:first-child', menu),
      current = parseInt(scroller.css("margin-left")),
      checked = Math.max(
      	Math.min(
        	isNaN(current) ? -scrollBy : current, 
          -scrollBy
          ), 
        scrollBy - currentMax - 102
        ),
      newVal = direction ? checked - scrollBy : checked + scrollBy;
    scroller.animate({
      'margin-left': newVal + 'px'
    }, duration, "linear");
    setTimeout(function() {
      if (keepScrolling) navScrollTo(direction);
    }, duration);
  }
  $('.navbar-angle > i').mousedown(function(e) {
    keepScrolling = true;
    navScrollTo($(e.target).closest('.fa').hasClass('chevron-left'));
  }).mouseup(function(e) {
    keepScrolling = false;
  });
  // in a production env the function below should be throttled
  // with {trailing:true}
  $(window).on('resize', function() {
    currentMax = GetWidths('.navbar-angle .navbar-nav > li') - $(window).width()
  })
})

.navbar-angle>i {
  display: none;
}
body {
  overflow-x: hidden;
}

@media(min-width: 768px) {
  .navbar-angle {
    position: relative;
    display: flex;
    align-items: center;
  }
  .navbar-angle>i {
    font-size: 40px;
    width: 50px;
    height: 52px;
    cursor: pointer;
    background-color: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    border: 1px solid #080808
  }
  .navbar-angle>i.chevron-left {
    border-right-color: rgba(0, 0, 0, .35);
  }
  .navbar-angle>i.chevron-right {
    border-left-color: rgba(255, 255, 255, .12);
  }
  .navbar-angle nav {
    width: calc(100% - 100px);
    border-radius: 0;
    margin-bottom: 0;
    border-right-color: rgba(0, 0, 0, .35);
    border-left-color: rgba(255, 255, 255, .12);
  }
  .navbar-angle .container-fluid {
    padding: 0;
  }
  .navbar-angle nav .navbar-nav {
    display: flex;
  }
  .navbar-angle nav .navbar-nav li {
    flex: 1 0 auto;
  }
}

@media (max-width: 768px) {
  .navbar-angle nav li:first-child {
    margin-left: 0px!important;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="navbar-angle">
  <i class="fa fa-chevron-left chevron-left" aria-hidden="true"></i>
  <nav class="navbar navbar-inverse mrgn-btm-0">
    <div class="container-fluid">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 4 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 5 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">bootstrapPage 6</a></li>
        <li><a href="#">bootstrapPage 7</a></li>
        <li><a href="#">bootstrapPage 8</a></li>
        <li><a href="#">bootstrapPage 9</a></li>
        <li><a href="#">bootstrapPage 10</a></li>
        <li><a href="#">bootstrapPage 11</a></li>
        <li><a href="#">bootstrapPage 12</a></li>
        <li><a href="#">bootstrapPage 13</a></li>
        <li><a href="#">bootstrapPage 14</a></li>
      </ul>
    </div>
  </nav>
  <i class="fa fa-chevron-right chevron-right" aria-hidden="true"></i>
</div>

这是 the fiddle (我更喜欢它，因为它允许我调整面板的大小 - (而且它还解析 SCSS - 虽然我在这里没有使用过))。

---

除此之外，您当前正在加载 jQuery 两次。