Trabajé con este código:
$(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> Si se desplaza horizontalmente hasta el final del elemento #text , el degradado del lado derecho debería estar oculto. Si vuelve a desplazarse hacia el lado izquierdo, el degradado debería volver a mostrarse.
¿Alguien tiene idea de cómo programar eso?
Debería funcionar como quieras. Básicamente, calculo el área desplazable en fullWidth y lo comparo con 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>Debe restar el offsetWidth de desplazamiento del ancho de 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>