javascript - 没有滚动条的水平菜单滚动

Question

我有一个带有滚动条的水平菜单。我想让它在没有滚动条的情况下向右或向左滚动。那可能吗？左/右箭头按钮(在屏幕上而不是键盘上)或鼠标悬停。什么是最佳解决方案？

div.scrollmenu {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
}
div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}
div.scrollmenu a:hover {
  background-color: #777;
}

<div class="scrollmenu">
  <a href="#home">Week 1</a>
  <a href="#news">Week 2</a>
  <a href="#contact">Week 3</a>
  <a href="#about">Week 4</a>
  <a href="#support">Week 5</a>
  <a href="#blog">Week 6</a>
  <a href="#tools">Week 7</a> 
  <a href="#base">Week 9</a>
  <a href="#custom">Week 10</a>
  <a href="#more">Week 11</a>
  <a href="#logo">Week 12</a>
  <a href="#friends">Week 13</a>
  <a href="#partners">Week 14</a>
  <a href="#people">Week 15</a>
  <a href="#work">Week 16</a>
  <a href="#home">Week 17</a>
  <a href="#news">Week 18</a>
  <a href="#contact">Week 19</a>
  <a href="#about">Week 20</a>
  <a href="#support">Week 21</a>
  <a href="#blog">Week 22</a>
  <a href="#tools">Week 23</a> 
  <a href="#base">Week 24</a>
  <a href="#custom">Week 25</a>
  <a href="#more">Week 26</a>

</div>

Answer 1

这是一个使用脚本的解决方案 - 为了说明，我选择了左箭头和右箭头键和鼠标滚轮 用于左右导航。

编辑:还添加到左/右 导航按钮中。

查看下面的演示:

var $this = $('.scrollmenu');
var scrollAmount = 50;

function moveRight() {
  if ($this[0].scrollWidth - $this.scrollLeft() > $this.outerWidth()) {
    $this.scrollLeft($this.scrollLeft() + scrollAmount);
  }
}

function moveLeft() {
  if ($this.scrollLeft() > 0) {
    $this.scrollLeft($this.scrollLeft() - scrollAmount);
  }
}

$("body").keydown(function(e) {
  // left arrow
  if ((e.keyCode || e.which) == 37) {
    moveLeft();
  }
  // right arrow
  if ((e.keyCode || e.which) == 39) {
    moveRight();
  }
});

$this.bind('mousewheel', function(e) {
  if (e.originalEvent.wheelDelta / 120 > 0) {
    moveLeft();
  } else {
    moveRight();
  }
});

// push button navigation
$('.leftNav').click(moveLeft);
$('.rightNav').click(moveRight);

div.wrapper {
  position: relative;
}
div.scrollmenu {
  background-color: #333;
  white-space: nowrap;
  overflow: hidden;
}
div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}
div.scrollmenu a:hover {
  background-color: #777;
}
.leftNav {
  display: inline-block;
  color: white;
  font-weight: bolder;
  cursor: pointer;
  background: #333;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}
.rightNav {
  display: inline-block;
  color: white;
  font-weight: bolder;
  cursor: pointer;
  background: #333;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0.1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper">
  <div class="leftNav">&lt;</div>
  <div class="scrollmenu">
    <a href="#home">Week 1</a>
    <a href="#news">Week 2</a>
    <a href="#contact">Week 3</a>
    <a href="#about">Week 4</a>
    <a href="#support">Week 5</a>
    <a href="#blog">Week 6</a>
    <a href="#tools">Week 7</a> 
    <a href="#base">Week 9</a>
    <a href="#custom">Week 10</a>
    <a href="#more">Week 11</a>
    <a href="#logo">Week 12</a>
    <a href="#friends">Week 13</a>
    <a href="#partners">Week 14</a>
    <a href="#people">Week 15</a>
    <a href="#work">Week 16</a>
    <a href="#home">Week 17</a>
    <a href="#news">Week 18</a>
    <a href="#contact">Week 19</a>
    <a href="#about">Week 20</a>
    <a href="#support">Week 21</a>
    <a href="#blog">Week 22</a>
    <a href="#tools">Week 23</a> 
    <a href="#base">Week 24</a>
    <a href="#custom">Week 25</a>
    <a href="#more">Week 26</a>
  </div>
  <div class="rightNav">&gt;</div>
</div>