仅在容器可滚动时显示元素

Question

这是代码：

// if there is something to scroll horizontally then (but only for this container):

$(document).ready(function() {

  $(".scroll-area").scroll(function() {
    if ($(this).scrollLeft() > 0) {
      $(".left").css("display", "block");
    }

    if ($(this).scrollLeft() == 0) {
      $(".left").css("display", "none");
    }

    var fullWidth = $(this)[0].scrollWidth - $(this)[0].offsetWidth - 1;

    if ($(this).scrollLeft() >= fullWidth) {
      $(".right").css("display", "none");
    }

    if ($(this).scrollLeft() < fullWidth) {
      $(".right").css("display", "block");
    }

  });
});

// if there is nothing to scroll, don't show the gradients

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 16px;
}

.container {
  width: 550px;
  height: 80px;
  background-color: grey;
  position: relative;
  margin-bottom: 20px;
}

.scroll-area {
  white-space: nowrap;
  overflow-x: auto;
  height: 100%;
}

.left,
.right {
  width: 50px;
  height: 100%;
  position: absolute;
  pointer-events: none;
  top: 0;
}

.left {
  background: linear-gradient(90deg, orange 0%, rgba(0, 0, 0, 0) 100%);
  left: 0;
  display: none;
}

.right {
  background: linear-gradient(-90deg, orange 0%, rgba(0, 0, 0, 0) 100%);
  right: 0;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
  <div class="scroll-area">
    <div class="text">Scroll to right. Gradients are needed. This container works like expected. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
  </div>
</div>

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
  <div class="scroll-area">
    <div class="text">This container shouldn't show any gradient because nothing to scroll.</div>
  </div>
</div>

应该添加了一个if功能。逻辑应该是：仅当需要水平滚动时才显示渐变。如果不是，则隐藏渐变。它应该在同一个网页上独立地与不同的容器一起工作，并且应该在浏览器大小发生变化时更新。

有人知道如何编写代码吗？

Answer 1

一种方法是遍历所有 .scroll-area 元素并在滚动条可见时隐藏 .left 和 .right 元素。我添加了几个容器来演示：

// if there is something to scroll horizontally then (but only for this container):

$(document).ready(function() {
  $(".scroll-area").each(function(index) {
    if ($(this)[0].scrollWidth <= $(this)[0].clientWidth) {
      $(this).closest(".container").find(".left").css("display", "none");
      $(this).closest(".container").find(".right").css("display", "none");
    } else {
      $(this).scroll(function() {
        if ($(this)[0].scrollWidth > $(this)[0].clientWidth) {
          if ($(this).scrollLeft() > 0) {
            $(this).closest(".container").find(".left").css("display", "block");
          }

          if ($(this).scrollLeft() == 0) {
            $(this).closest(".container").find(".left").css("display", "none");
          }

          var fullWidth = $(this)[0].scrollWidth - $(this)[0].offsetWidth - 1;

          if ($(this).scrollLeft() >= fullWidth) {
            $(this).closest(".container").find(".right").css("display", "none");
          }

          if ($(this).scrollLeft() < fullWidth) {
            $(this).closest(".container").find(".right").css("display", "block");
          }
        }
      });
    }
  });
});

// if there is nothing to scroll, don't show the gradients

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 16px;
}

.container {
  width: 550px;
  height: 80px;
  background-color: grey;
  position: relative;
  margin-bottom: 20px;
}

.scroll-area {
  white-space: nowrap;
  overflow-x: auto;
  height: 100%;
}

.left,
.right {
  width: 50px;
  height: 100%;
  position: absolute;
  pointer-events: none;
  top: 0;
}

.left {
  background: linear-gradient(90deg, orange 0%, rgba(0, 0, 0, 0) 100%);
  left: 0;
  display: none;
}

.right {
  background: linear-gradient(-90deg, orange 0%, rgba(0, 0, 0, 0) 100%);
  right: 0;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<div class="container">
  <div id="x" class="left"></div>
  <div class="right"></div>
  <div id="a" class="scroll-area">
    <div class="text">Scroll to right. Gradients are needed. This container works like expected. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
  </div>
</div>

<div class="container">
  <div id="y" class="left"></div>
  <div class="right"></div>
  <div id="b" class="scroll-area">
    <div class="text">This container shouldn't show any gradient because nothing to scroll.</div>
  </div>
</div>

<div class="container">
  <div id="y" class="left"></div>
  <div class="right"></div>
  <div id="b" class="scroll-area">
    <div class="text">This container shouldn't show any gradient because nothing to scroll.</div>
  </div>
</div>

<div class="container">
  <div id="x" class="left"></div>
  <div class="right"></div>
  <div id="a" class="scroll-area">
    <div class="text">Scroll to right. Gradients are needed. This container works like expected. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
  </div>
</div>

仅在容器可滚动时显示元素

Only show elements if container is scrollable

javascript

jquery

horizontal-scrolling