Hide element if scrolled to maximum of container-CodePudding

I worked with this code:

$(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>

If you scroll horizontally to the end of the #text element, the gradient on the right side should be hidden. If you scroll to the left side again, the gradient should be shown again.

Has anyone an idea how to program that?

CodePudding user response：

You need to subtract the offsetWidth from the scrollWidth:

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>

CodePudding user response：

It should work as you want. Basically i calculate scrollable area in fullWidth and compare it with 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>