Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您可以将菜单包装在容器中并将该容器设置为java.awt.Frame - 然后将其设置为菜单的高度 - 减去滚动条！

不适用于辅助功能，但它有效。现在滚动的唯一方法是突出显示，使用箭头键或在触摸屏上滑动。

＆＃13;

overflow:hidden;

＆＃13;

#wrapper{overflow:hidden;height:48px;}

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;
}

＆＃13;

jsfiddle of example here

Answer 2

我已经使用jquery来创造有用的东西 - 但它绝不是一个优雅的解决方案。

jsfiddle here。

HTML：

<div id="wrapper">

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

<div class="left">
Left</div>

<div class="right">
right</div>
</div>
</div>

的CSS：

#wrapper{overflow:hidden;height:48px;}

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

.left, .right {
  height: 50px;
  background: red;
}

.right {
  background: green;
  margin-top: 50px;
}

jQuery的：

var moveleft = false;
var moveright = false;
cur_pos = 0;


$(document).ready(function(){
  setInterval(function(){
        if (moveleft) {
          $('.scrollmenu').scrollLeft(cur_pos + 10);
          cur_pos = $('.scrollmenu').scrollLeft();
        }
    }, 5);

    setInterval(function(){
        if (moveright) {
          $('.scrollmenu').scrollLeft(cur_pos - 10);
          cur_pos = $('.scrollmenu').scrollLeft();
        }     
    }, 5);
});

$('.left').mouseenter(function(){
    moveleft = true;
});

$('.left').mouseleave(function(){
  moveleft = false;
});

$('.right').mouseenter(function(){
    moveright = true;       
});

$('.right').mouseleave(function(){
  moveright = false;
});

Answer 3

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

编辑：还在左/右导航按钮中添加。

查看下面的演示：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

水平菜单滚动没有滚动条

3 个答案: