水平滚动菜单scroll（）事件而不是animate（）？ jQuery的

Question

我正在编程这个滚动条菜单....它差不多完成了，但仍然有这个问题

问题

1）它无法识别两端......

2）我希望.scrollmenu维持overflow:auto;

3）在当前的小提琴中，导航按钮不会滚动.scrollmenu只是移动它们。我想知道是否可以使用(".scrollmenu").scroll()代替(".scrollmenu").animate()

＆＃13;

＆＃13;

$("#left").click(function(event) { 
event.preventDefault();
     $(".scrollmenu").animate({ "left": "+=60px" }, "slow" );

});

$("#right").click(function(event) {
event.preventDefault();
   $(".scrollmenu").animate({ "left": "-=60px" }, "slow" );
});
	

＆＃13;

.container {
  border: 0px solid red;
  height: 45px;
  overflow: hidden;
  width: 300px;
  background-color: #333;
}

.scrollmenu {
  background-color: #333;
  overflow:auto;
  white-space: nowrap;
  position: relative;

}

.scrollmenu::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

.scrollmenu a:hover {
  background-color: #777;
}

#right,
#left {
  cursor: pointer;
  pointer-events: all
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table border=1>
  <tr>
    <td id="left">&#8592;</td>
    <td>
      <div class="container">
        <div class="scrollmenu">
          <a href="#home">Home</a>
          <a href="#news">News</a>
          <a href="#contact">Contact</a>
          <a href="#about">About</a>
          <a href="#support">Support</a>
          <a href="#blog">Blog</a>
          <a href="#tools">Tools</a>
          <a href="#base">Base</a>
          <a href="#custom">Custom</a>
          <a href="#more">More</a>
          <a href="#logo">Logo</a>
          <a href="#friends">Friends</a>
          <a href="#partners">Partners</a>
          <a href="#people">People</a>
          <a href="#work">Work</a>
        </div>
      </div>
    </td>
    <td id="right">&#8594;</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果我正确理解您的问题，您只需在代码中将left更改为scrollLeft，其行为与可见滚动条完全相同（因此您还需要反转值）。

$("#left").click(function(event) { 
event.preventDefault();
     $(".scrollmenu").animate({ "scrollLeft": "-=60px" }, "slow" );

});

$("#right").click(function(event) {
event.preventDefault();
   $(".scrollmenu").animate({ "scrollLeft": "+=60px" }, "slow" );
});
	

.container {
  border: 0px solid red;
  height: 45px;
  overflow: hidden;
  width: 300px;
  background-color: #333;
}

.scrollmenu {
  background-color: #333;
  overflow:auto;
  white-space: nowrap;
  position: relative;

}

.scrollmenu::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

.scrollmenu a:hover {
  background-color: #777;
}

#right,
#left {
  cursor: pointer;
  pointer-events: all
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table border=1>
  <tr>
    <td id="left">&#8592;</td>
    <td>
      <div class="container">
        <div class="scrollmenu">
          <a href="#home">Home</a>
          <a href="#news">News</a>
          <a href="#contact">Contact</a>
          <a href="#about">About</a>
          <a href="#support">Support</a>
          <a href="#blog">Blog</a>
          <a href="#tools">Tools</a>
          <a href="#base">Base</a>
          <a href="#custom">Custom</a>
          <a href="#more">More</a>
          <a href="#logo">Logo</a>
          <a href="#friends">Friends</a>
          <a href="#partners">Partners</a>
          <a href="#people">People</a>
          <a href="#work">Work</a>
        </div>
      </div>
    </td>
    <td id="right">&#8594;</td>
  </tr>
</table>