如果滚动到容器的最大值则隐藏元素

Question

我使用了这段代码：

$(document).ready(function() {


// Show left gradient if scrolled x value is greater than 0

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


// Hide left gradient if scrolled x value is 0

    if ($("#scroll-area").scrollLeft() == 0) {
      $("#left").css("display", "none");
    }


// Calculate with of the scroll area

    var fullWidth = $('#scroll-area')[0].scrollWidth;


// Doesn't work: Hide right gradient if scrolled to maximum

    if ($("#scroll-area").scrollLeft() == fullWidth) {
      $("#right").css("display", "none");
    }


// Doesn't work: Show gradient if scrolled less than maximum

    if ($("#scroll-area").scrollLeft() < fullWidth) {
      $("#right").css("display", "block");
    }


  });
});

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

#container {
  width: 50%;
  height: 120px;
  background-color: grey;
  position: relative;
}

#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 id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="scroll-area">
    <div id="text">Please scroll horizontally to the right side, and back again. 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>

如果水平滚动到#text元素的末尾，右侧的渐变应该被隐藏。如果您再次滚动到左侧，应该会再次显示渐变。

有人知道如何编程吗？

Answer 1

它应该如您所愿。基本上我在 fullWidth 中计算可滚动区域并将其与 scrollPosition

进行比较

$("#scroll-area").scroll(function() {
  var fullWidth = $('#scroll-area')[0].scrollWidth - $('#scroll-area')[0].clientWidth;
  var scrollPosition = $(this).scrollLeft();
  if (scrollPosition > 0 && scrollPosition <= fullWidth) {
    $("#left").css("display", "block");
    $("#right").css("display", "block");
  } else if (scrollPosition == 0) {
    $("#left").css("display", "none");
    $("#right").css("display", "block");
  } else if (fullWidth <= scrollPosition) {
    $("#left").css("display", "block");
    $("#right").css("display", "none");
  }
  console.log('Scroll pos',scrollPosition);
  console.log('Full width', fullWidth);
});

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

#container {
  width: 50%;
  height: 300px;
  background-color: grey;
  position: relative;
}

#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 id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="scroll-area">
    <div id="text">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>

Answer 2

您需要从 scrollWidth 中减去 offsetWidth：

var fullWidth = $('#scroll-area')[0].scrollWidth - $('#scroll-area')[0].offsetWidth - 1  // -1 for browser compatibility

$(document).ready(function() {


// Show left gradient if scrolled x value is greater than 0

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


// Hide left gradient if scrolled x value is 0

    if ($("#scroll-area").scrollLeft() == 0) {
      $("#left").css("display", "none");
    }


// Calculate with of the scroll area
    
    var fullWidth = $('#scroll-area')[0].scrollWidth - $('#scroll-area')[0].offsetWidth - 1;


// Doesn't work: Hide right gradient if scrolled to maximum

    if ($("#scroll-area").scrollLeft() >= fullWidth) {
      $("#right").css("display", "none");
    }


// Doesn't work: Show gradient if scrolled less than maximum

    if ($("#scroll-area").scrollLeft() < fullWidth) {
      $("#right").css("display", "block");
    }

  });
});

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

#container {
  width: 50%;
  height: 120px;
  background-color: grey;
  position: relative;
}

#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 id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="scroll-area">
    <div id="text">Please scroll horizontally to the right side, and back again. 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>

如果滚动到容器的最大值则隐藏元素

Hide element if scrolled to maximum of container

javascript

jquery

overflow

horizontal-scrolling