0
1.5K
ViewsCómo aumentar el ancho de la barra de desplazamiento cuando el usuario pasa el mouse sobre ella
Hola, tengo un problema con mi pergamino personalizado.
requisito: cuando el usuario se desplaza sobre un div, solo se debe mostrar la barra de desplazamiento y cuando el usuario se desplaza sobre la barra de desplazamiento, el ancho de la barra de desplazamiento debe aumentar de 5px a 15px.
lo que hice: creé una barra de desplazamiento personalizada e implementé el desplazamiento en div y, sin embargo, tengo un problema cuando el usuario pasa el mouse sobre la barra de desplazamiento y no puedo aumentar su tamaño.
*::-webkit-scrollbar-thumb:hover { background-color: blue; border: 1px; width: 15px; } *::-webkit-scrollbar:hover { width: 15px; } *:hover::-webkit-scrollbar { width: 10px; }a continuación está mi código
.html
<html> <head> <meta charset="UTF-8" /> <script src="script.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <div class="table"> Hello<br /> Hello<br /> Hello<br /> Hello<br /> Hello<br /> Hello<br /> Hello<br /> Hello<br /> Hello<br /> Hello<br /> Hello<br /> Hello<br /> Hello<br /> Hello<br /> Hello<br /> Hello<br /> Hello<br /> Hello<br /> Hello<br /> </div> </body> </html>codigo css:
*::-webkit-scrollbar { width: 5px; border: 1px; } *::-webkit-scrollbar-track { background: #ebf0f5; } *::-webkit-scrollbar-thumb { background-color: black; border: 1px; } *::-webkit-scrollbar-thumb:hover { width: 15px; } .table { position: relative; left: 150px; top: 150px; width: 200px; max-height: 200px; background-color: rgba(255, 0, 0, 0.55); overflow: hidden; } .table:hover { overflow-y: auto; scroll-behavior: smooth; }URL de la aplicación: https://stackblitz.com/edit/web-platform-9mbus1?file=styles.css
en lugar de aumentar el ancho y aplicar color, solo está aplicando color
3 answers
Answer question0
Prueba esto:-
document.addEventListener("mousemove", function(e){ let ele = document.getElementById('element'); let distance = ele.offsetLeft + ele.offsetWidth - e.pageX; distance < 15 && distance > -15 ? ele.classList.add('more-width') : ele.classList.remove('more-width'); }); #element { position: relative; left: 150px; top: 150px; width: 200px; max-height: 200px; background-color: rgba(255, 0, 0, 0.55); overflow: auto; } #element::-webkit-scrollbar-thumb { background: #888; } #element::-webkit-scrollbar { width: 5px; } #element.more-width::-webkit-scrollbar { width: 20px; } <div id="element"> Hello<br> Hello<br> Hello<br> Hello<br> Hello<br> Hello<br> Hello<br> Hello<br> Hello<br> Hello<br> Hello<br> Hello<br> Hello<br> Hello<br> Hello<br> Hello<br> Hello<br> Hello<br> Hello<br> </div>0
No lo configuró en 15px en primer lugar.
*::-webkit-scrollbar-thumb:hover { background-color: blue; border: 1px; width: 15px; }0
El elemento ::-webkit-scrollbar no es estándar (no es compatible con Firefox).
En cualquier caso, parece que no se puede hacer solo con CSS.
En consecuencia, es mejor que busque una reescritura.
¡Encontré un posible enfoque aquí , así como un blog y un enlace de github para (con suerte) compensar por no incluir el código en línea!