我正在制作这个可滚动的菜单，
问题
它不识别两端（左和右）。我添加了一个脚本，但它适用于滚动事件....我认为问题是识别.animate()事件，因为运动是用箭头给出的（它们是动画.scrollmenu）
$("#left").click(function(event) {
event.preventDefault();
$(".scrollmenu").animate({ "left": "+=60px" }, "slow" );
});
$("#right").click(function(event) {
event.preventDefault();
$(".scrollmenu").animate({ "left": "-=60px" }, "slow" );
});
///detect ends
$(function () {
var scrollLeftPrev = 0;
$('.scrollmenu').scroll(function () {
var $elem=$('.scrollmenu');
var newScrollLeft = $elem.scrollLeft(),
width=$elem.width(),
scrollWidth=$elem.get(0).scrollWidth;
var offset=8;
if (scrollWidth- newScrollLeft-width==offset) {
alert('right end');
}
if (newScrollLeft === 0) {
alert('left end');
}
scrollLeftPrev = newScrollLeft;
});
});
.container {
border:0px solid red;
height:45px;
overflow:hidden;
width:300px;
background-color: #333;
}
.scrollmenu {
width:100%;
background-color: #333;
overflow: visible;
white-space: nowrap;
position:relative;
display: block;
}
.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.8.3/jquery.min.js"></script>
<table border=1>
<tr>
<td id="left">←</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">→</td>
</tr>
</table>
答案 0 :(得分：1)
无需将scroll事件附加到菜单，因为只有在用户手动滚动时才会触发事件。您不需要检查大量逻辑，因为我们将依赖于称为scrollLeft的HTML属性。我们只需将父元素设置为overflow: auto，然后让内部.scrollMenu扩展为子元素的总宽度。
这是为了确保所有scrollMenu的子项都可见，并且我们支持父容器中的触摸设备：
.container {
border: 0px solid red;
height: 45px;
overflow: hidden;
width: 300px;
background-color: #333;
overflow: auto;
}
.scrollmenu {
background-color: #333;
white-space: nowrap;
position: relative;
display: inline-block;
}
键是display: inline-block，它会强制菜单扩展到其包裹子项的宽度。
您可能已经注意到，桌面浏览器将显示一个丑陋的滚动条。您可能希望隐藏桌面浏览器或其他非触摸设备上的滚动条;）一种简单的方法是使用JS：'ontouchstart' in document.documentElement执行此操作，如果是真的，您可以在<html>或.container元素。请参阅实施的概念验证。
只需使用jQuery的动画来补充父级的scrollWidth。浏览器不会滚动到可滚动区域之外，因此您不需要任何逻辑来检测溢出;）
$("#left").click(function(event) {
var $elem = $('.scrollmenu');
var $parent = $elem.parent();
$parent.animate({ scrollLeft: '-=60' }, 300);
});
$("#right").click(function(event) {
var $elem = $('.scrollmenu');
var $parent = $elem.parent();
$parent.animate({ scrollLeft: '+=60' }, 300);
});
这是概念验证示例，通过一些非常基本的触摸支持检测来切换菜单的父元素中的滚动条：
if ('ontouchstart' in document.documentElement)
$('html').addClass('has-touch');
$("#left").click(function(event) {
// Check if menu has reached left edge
var $elem = $('.scrollmenu');
var offsetLeft = parseInt($elem.css('left'));
if (offsetLeft > 0) {
$elem.css('left', 0);
return;
}
// Ensure that we don't overscroll
var scrollDistance = Math.min(Math.abs(offsetLeft), 60);
event.preventDefault();
$elem.animate({
"left": "+=" + scrollDistance + "px"
}, "slow");
});
$("#right").click(function(event) {
// Check if menu has reached right edge
var $elem = $('.scrollmenu');
var scrollWidth = $elem[0].scrollWidth;
var parentWidth = $elem.parent().outerWidth();
var offsetLeft = parseInt($elem.css('left'));
if (offsetLeft <= parentWidth - scrollWidth) {
$elem.css('left', parentWidth - scrollWidth);
return;
}
// Ensure that we don't overscroll
var difference = Math.abs(parentWidth - scrollWidth) - Math.abs(offsetLeft);
var scrollDistance = Math.min(Math.abs(difference), 60);
$(".scrollmenu").animate({
"left": "-=" + scrollDistance + "px"
}, "slow");
});.container {
border: 0px solid red;
height: 45px;
overflow: hidden;
width: 300px;
background-color: #333;
}
/* Support touch devices */
html.has-touch .container {
overflow-x: auto;
}
.scrollmenu {
background-color: #333;
white-space: nowrap;
position: relative;
display: inline-block;
}
.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.8.3/jquery.min.js"></script>
<table border=1>
<tr>
<td id="left">←</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">→</td>
</tr>
</table>