const scrollList = document.getElementsByClassName('scrollList'); function scrollLeft() { scrollList.scrollLeft -= 50 } function scrollRight() { scrollList.scrollLeft += 50 } #scrollList { display: flex; overflow: auto; width: 100px; } .div { display: flex; } <div class="div"> <button onclick="scrollLeft()">Scroll Left</button> <div id="scrollList"> <p>Image</p> <p>Image</p> <p>Image</p> <p>Image</p> <p>Image</p> <p>Image</p> </div> <button onclick="scrollRight()">Scroll Right</button> </div>Tengo un desplazamiento de página horizontal en div con flechas y quiero ocultar la flecha izquierda y derecha cuando no puede desplazarse más. Tengo una galería, así que cuando no hay más imágenes para desplazarme, quiero ocultar el botón (flecha). Entonces, al principio no quiero mostrar la flecha izquierda, y al final, cuando no hay más imágenes, quiero ocultar la flecha derecha. ¿Cómo puedo hacer eso con javascript? ¡Gracias por tu ayuda!
Déjame responder a mi amigo. Podría ayudarte. ^_^
<!DOCTYPE html> <html> <head> <style> .example { background-color: #eee; width: 200px; height: 100px; border: 1px dotted black; overflow-y: scroll; /* Add the ability to scroll */ } /* Hide scrollbar for Chrome, Safari and Opera */ .example::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge and Firefox */ .example { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } </style> </head> <body> <h2>Hide scrollbar but keep functionality</h2> <p>Try to scroll inside the div below:</p> <div class="example">Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. </div> </body> </html>Puede usar la función window.scroll() en JavaScript Deje que xScroll=window.scrollX Devuelva el valor flotante y luego use las condiciones para mostrar la flecha " ClassName={xScroll<70 ? 'hide' : 'show'}