使用 CSS 和 jQuery 將上一個/下一個按鈕添加到滾動容器

Question

經過長時間的研究，我找到了一種將自定義滾動條添加到 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 添加自定義滾動條。

只有一件事我無法解決。 我想向滾動元素添加上一個/下一個箭頭。 按鈕應跳轉到 DIV 中的上一個/下一個元素，該元素位於 div 的左/右側旁邊，並且尚未（部分）滾動。

並且 JS 應該適用於站點上的每個 slider 實例。 就像 SimpleBar 本身一樣。 每個滾動容器不需要額外的代碼。

我可以在 jQuery 中使用什么嗎？

編輯：我找到了這個答案和小提琴。 我將代碼添加到我的示例中並將其更改為左/右。 這不完全是我需要的，但我認為這可能是一個起點。 不幸的是，它不能正常工作。

Answer 1

您可以使用以下代碼。 請注意，滾動取決於視口，因此一旦 go 沒有更多的正確寬度，它將沒有更多的移動空間。

 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>