在最后一項禁用向左或向右箭頭

剛剛制作了一個帶有導航箭頭的簡單 div 滑塊。div 滑塊作業得很好，除了我希望將某種CSS 樣式應用于arrows。

也就是說，當用戶單擊向左或向右箭頭時，直到最后一項，應用 CSS 樣式告訴用戶他們已經到達滑塊的末尾。

let buttonLeft = document.getElementById('slide_left')
let buttonRight = document.getElementById('slide_right')

let container = document.getElementById('slider')

buttonLeft.addEventListener('click', function() {
  container.scrollLeft -= 90
})

buttonRight.addEventListener('click', function() {
  container.scrollLeft  = 90
})

body {
  background-color: #555;
  height: 100vh;
  display: grid;
  align-items: center;
  justify-items: center;
  font-family: 'Helvetica';
}

div#slide_wrapper {
  width: 440px;
  display: flex;
  justify-content: space-between;
  height: fit-content;
}

div#slider {
  width: 350px;
  display: flex;
  height: fit-content;
  flex-wrap: nowrap;
  overflow: hidden;
}

div.thumbnail {
  min-width: 80px;
  min-height: 80px;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 30px;
}

div.thumbnail:not(:last-child) {
  margin-right: 10px;
}

div.thumbnail:nth-child(1) {
  background-color: darkturquoise;
}

div.thumbnail:nth-child(2) {
  background-color: goldenrod;
}

div.thumbnail:nth-child(3) {
  background-color: rebeccapurple;
}

div.thumbnail:nth-child(4) {
  background-color: powderblue;
}

div.thumbnail:nth-child(5) {
  background-color: firebrick;
}

div.thumbnail:nth-child(6) {
  background-color: sienna;
}

div.thumbnail:nth-child(7) {
  background-color: bisque;
}

div.thumbnail:nth-child(8) {
  background-color: navy;
}

div#slide_wrapper>button {
  height: fit-content;
  align-self: center;
  font-size: 24px;
  font-weight: 800;
  border: none;
  outline: none;
}

div#slide_wrapper>button:hover {
  cursor: pointer;
}

<div id="slide_wrapper">
  <button id="slide_left" class="slide_arrow">&#10094;</button>
  <div id="slider">
    <div class="thumbnail active">1</div>
    <div class="thumbnail">2</div>
    <div class="thumbnail">3</div>
    <div class="thumbnail">4</div>
    <div class="thumbnail">5</div>
    <div class="thumbnail">6</div>
    <div class="thumbnail">7</div>
    <div class="thumbnail">8</div>
  </div>
  <button id="slide_right" class="slide_arrow">&#10095;</button>
</div>

uj5u.com熱心網友回復：

只需檢查是否需要根據滾動的位置禁用每個按鈕。然后如果需要禁用按鈕，則將disabled類添加到按鈕，否則將其洗掉。

未來的增強功能。

1. 洗掉360滾動端的硬編碼值。這應該根據輪播專案的大小和視口的寬度來計算。

2. 允許多個輪播使用相同的代碼。這可以通過使用class將元素保存在物件內部的 javascript 來實作，與其他輪播分離。

查看演示：

let buttonLeft = document.getElementById('slide_left')
let buttonRight = document.getElementById('slide_right')

let container = document.getElementById('slider')


let checkScroll = function() {
  if (container.scrollLeft <= 0)
    buttonLeft.classList.add("disabled");
  else
    buttonLeft.classList.remove("disabled");

  if (container.scrollLeft >= 360)
    buttonRight.classList.add("disabled");
  else
    buttonRight.classList.remove("disabled");
}

checkScroll();

buttonLeft.addEventListener('click', function() {
  container.scrollLeft -= 90;

  checkScroll();
})

buttonRight.addEventListener('click', function() {
  container.scrollLeft  = 90;
  checkScroll();
})

body {
  background-color: #555;
  height: 100vh;
  display: grid;
  align-items: center;
  justify-items: center;
  font-family: 'Helvetica';
}

div#slide_wrapper {
  width: 440px;
  display: flex;
  justify-content: space-between;
  height: fit-content;
}

div#slider {
  width: 350px;
  display: flex;
  height: fit-content;
  flex-wrap: nowrap;
  overflow: hidden;
}

div.thumbnail {
  min-width: 80px;
  min-height: 80px;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 30px;
}

div.thumbnail:not(:last-child) {
  margin-right: 10px;
}

div.thumbnail:nth-child(1) {
  background-color: darkturquoise;
}

div.thumbnail:nth-child(2) {
  background-color: goldenrod;
}

div.thumbnail:nth-child(3) {
  background-color: rebeccapurple;
}

div.thumbnail:nth-child(4) {
  background-color: powderblue;
}

div.thumbnail:nth-child(5) {
  background-color: firebrick;
}

div.thumbnail:nth-child(6) {
  background-color: sienna;
}

div.thumbnail:nth-child(7) {
  background-color: bisque;
}

div.thumbnail:nth-child(8) {
  background-color: navy;
}

div#slide_wrapper>button {
  height: fit-content;
  align-self: center;
  font-size: 24px;
  font-weight: 800;
  border: none;
  outline: none;
}

div#slide_wrapper>button:hover {
  cursor: pointer;
}

.slide_arrow.disabled {
  opacity: 0.2;
  cursor: auto !important;
}

<div id="slide_wrapper">
  <button id="slide_left" class="slide_arrow">&#10094;</button>
  <div id="slider">
    <div class="thumbnail active">1</div>
    <div class="thumbnail">2</div>
    <div class="thumbnail">3</div>
    <div class="thumbnail">4</div>
    <div class="thumbnail">5</div>
    <div class="thumbnail">6</div>
    <div class="thumbnail">7</div>
    <div class="thumbnail">8</div>
  </div>
  <button id="slide_right" class="slide_arrow">&#10095;</button>
</div>

uj5u.com熱心網友回復：

一個簡單的解決方案是實際創建一個 CSS 類，當沒有更多專案時定義箭頭的樣式，然后根據當前專案索引添加/洗掉類

標籤：javascript html css

上一篇：是否可以使用vanillaJavaScript更改滾動條設計？

下一篇：如何將我的文本更改為在左側，將表格更改為在右側