返回开始于滚动条的末尾

Question

我使用JS创建了一种伪造的滚动条，因为我的老板正在使用Mac，并且滚动条默认情况下处于关闭状态，他想知道发生了什么。

我的代码如下：

$(function() {
	var popular_products_span = $("#popular_products_span");
	var items = popular_products_span.children();
	popular_products_span.prepend('<div id="right-button"><a href="#"><</a></div>');
	popular_products_span.append('<div id="left-button"><a href="#">></a></div>');
	items.wrapAll('<div id="inner" />');
	popular_products_span.find('#inner').wrap('<div id="outer"/>');
	var outer = $('#outer');
	var updateUI = function() {
		var maxWidth = outer.outerWidth(true);
		var actualWidth = 0;
		$.each($('#inner >'), function(i, item) {
			actualWidth += $(item).outerWidth(true);
		});
	};
	updateUI();
	$('#right-button').click(function() {
		var leftPos = outer.scrollLeft();
		outer.animate({
			scrollLeft: leftPos - 300
		}, 300);
	});
	$('#left-button').click(function() {
		var leftPos = outer.scrollLeft();
		outer.animate({
			scrollLeft: leftPos + 300
		}, 300);
	});
	$(window).resize(function() {
		updateUI();
	});
});

#popular_products_span{
	overflow:hidden;
}
img{
	padding:10px;
}
#outer {
	float:left;
	width:400px;
	overflow:hidden;
	white-space:nowrap;
	display:inline-block;
}
#left-button {
	float:left;
}
#right-button {
	float:left;
}
#inner:first-child {
	margin-left:0;
}
.hide {
	display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span id="popular_products_span">
<img src="http://via.placeholder.com/100x100">
<img src="http://via.placeholder.com/100x100">
<img src="http://via.placeholder.com/100x100">
<img src="http://via.placeholder.com/100x100">
<img src="http://via.placeholder.com/100x100">
<img src="http://via.placeholder.com/100x100">
<img src="http://via.placeholder.com/100x100">
<img src="http://via.placeholder.com/100x100">
<img src="http://via.placeholder.com/100x100">
</span>

但是，我希望它无休止地滚动，因此您无需回到终点就可以重新回到起点，并且不确定如何进行此操作。

对此将提供任何帮助或帮助。

Answer 1

这就是我最终使用起来要容易得多的方法 https://kenwheeler.github.io/slick/