经过长时间的研究，我找到了一个向DIV元素添加自定义滚动条的解决方案。它叫SimpleBar。文件可以在这里找到。
HTML结构和JS代码非常简单：
工作演示
<div class="gallery" data-simplebar data-simplebar-auto-hide="false">
<div class="item"><img src="https://via.placeholder.com/250x150/0000FF" /></div>
<div class="item"><img src="https://via.placeholder.com/350x150/FF0000" /></div>
[...]
</div>
通过data-simplebar，我可以向任何div添加自定义滚动条。
只有一件事我解决不了。我想在scroll元素中添加prev/next箭头。按钮应该跳转到DIV中的prev/next元素，该元素紧挨着DIV的左侧/右侧，并且还没有滚动（部分）。
并且JS应该适用于站点上的每个滑块实例。就像SimpleBar本身一样。每个滚动容器不需要额外的代码。
在jQuery中有什么我可以使用的东西吗？
编辑：我找到了这个答案和小提琴。我将代码添加到我的示例中，并将其更改为left/right。这并不完全是我所需要的，但我认为这可能是一个起点。不幸的是它不能正常工作。
您可以使用以下代码。请注意，滚动取决于视区，因此一旦没有更多的右宽度可转到，它将没有更多的空间移动。
null
const DIRECTION = { PREV: 1, NEXT: 2 };
$(document).ready(function () {
$('.container').each(function (index, containerItem) {
var $gallery = $(containerItem).find('.gallery');
const simpleBar = new SimpleBar($gallery[0], {
autoHide: false,
scrollbarMaxSize: 50
});
var $scroller = $(simpleBar.getScrollElement());
$(containerItem).find('.scrollLeft').on('click', function () {
scroll(DIRECTION.PREV, $scroller);
event.preventDefault(); // prevents anchor jump on click
});
$(containerItem).find('.scrollRight').on('click', function () {
scroll(DIRECTION.NEXT, $scroller);
event.preventDefault();
});
$scroller.scroll(function () {
setButtonsVisibility($scroller);
});
});
});
function scroll(direction, $scroller) {
var $active = $scroller.find('.active');
var $target = direction == DIRECTION.PREV ? $active.prev() : $active.next();
if ($target.length) {
$scroller.animate({
scrollLeft: $target[0].offsetLeft
}, 2000);
$active.removeClass('active');
$target.addClass('active');
}
}
function setButtonsVisibility($scroller) {
var scrollLeft = $scroller.scrollLeft();
isScrollerStart($scroller, scrollLeft);
isScrollerEnd($scroller, scrollLeft);
}
function isScrollerStart($scroller, scrollLeft, $button) {
var $prevButton = $scroller.closest('.container').find('.scrollLeft');
if (scrollLeft == 0) {
$prevButton.css('visibility', 'hidden');
} else {
$prevButton.css('visibility', 'visible');
}
}
function isScrollerEnd($scroller, scrollLeft) {
var $nextButton = $scroller.closest('.container').find('.scrollRight');
var scrollWidth = $scroller[0].scrollWidth; // entire width
var scrollerWidth = $scroller.outerWidth() // visible width
if (scrollLeft >= scrollWidth - scrollerWidth) {
$nextButton.css('visibility', 'hidden');
} else {
$nextButton.css('visibility', 'visible');
}
}.container {margin: 0 auto 2rem; max-width: 960px;}
.gallery {padding-bottom: 2rem; margin-bottom: 2rem;}
.gallery .simplebar-content {display: flex;}
.gallery .item {margin-right: 1rem;}
.simplebar-scrollbar:before {background: red !important;}
.simplebar-track.simplebar-horizontal {background: #eee !important;;}
.buttons {display: flex; justify-content: space-between; width: 100%; margin-bottom: 2rem;}
.buttons a {padding: 0.5rem; background: #ddd; text-decoration: none; color: #000;}
.scrollLeft { visibility: hidden; }<script src="https://unpkg.com/simplebar@latest/dist/simplebar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/simplebar@latest/dist/simplebar.css">
<div class="container">
<h2>Slider</h2>
<div class="gallery">
<div class="item active"><img src="https://via.placeholder.com/150x30/110000" /></div>
<div class="item"><img src="https://via.placeholder.com/450x30/3300FF" /></div>
<div class="item"><img src="https://via.placeholder.com/350x30/992244" /></div>
<div class="item"><img src="https://via.placeholder.com/400x30/0000FF" /></div>
</div>
<div class="buttons">
<a class="scrollLeft" href="#"><strong>Prev</strong> (remove if first)</a>
<a class="scrollRight" href="#"><strong>Next</strong> (remove if last)</a>
</div>
</div>
<div class="container">
<h2>Slider</h2>
<div class="gallery">
<div class="item active"><img src="https://via.placeholder.com/150x30/110000" /></div>
<div class="item"><img src="https://via.placeholder.com/450x30/3300FF" /></div>
<div class="item"><img src="https://via.placeholder.com/350x30/992244" /></div>
<div class="item"><img src="https://via.placeholder.com/400x30/0000FF" /></div>
</div>
<div class="buttons">
<a class="scrollLeft" href="#"><strong>Prev</strong> (remove if first)</a>
<a class="scrollRight" href="#"><strong>Next</strong> (remove if last)</a>
</div>
</div>