Buongiorno programmers,
ho un problema con la mia pagina html che visualizza un lungo testo all'interno del div con id genera,
io vorrei però che all' hover sulla barra di scroll la barra si ingrandisse , e fin qui lo fa, ma il problema è che mi shifta tutto il contenuto del body a sinistra di qualche pixel e io voglio evitare questo comportamento, come posso fare a far ingrandire la barra all' hover senza muovere il resto del body?
qui sotto vi metto html e css per la barra che sto usando:
HTML:
codice:
<body>
<div class="barra_enter">
<div class="dropdown">
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<div class="link-list-wrapper">
<li>
<a class="list-item" href="#">
<p class="pubblicazione"></p>
<div class="prev" onClick="indietro()">Prev</div>
<div class="bottone">
<button class="indice" id="idx_button2"><span>Indice</span></button>
</div>
<div class="next" onClick="avanti()">Next</div>
<input type="text" name="testo" class="scrivi_cerca" id="search-in" onClick="tastiera()" placeholder="cerca nel sito…">
<button class="btn-search" id="myButton" value="Highlight multiple search terms" onClick="ricerca();"><img class="img_search" alt="foto" src="assets/images/lente.svg"></button>
<div class="box" style="visibility: hidden;">
<button class="next-search" onClick="nextsearch()">next-search</button>
<div class="text-area"></div>
</div>
<button class="exit" onClick="chiudi()">X</button>
</a>
</li>
</div>
</div>
</div>
</div>
<div id="marginSX" class="margin"></div>
<div id="genera" class="hyphenate" lang="it"></div> /*In questo div viene caricato un lunghissimo testo da un json*/
<div id="marginDX" class="margin"></div>
</body>
qui il css della scrollbar:
codice:
<style>
::-webkit-scrollbar {
width: 8px;
background-color: #d2d2d2;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #5b5b5b;
box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}
::-webkit-scrollbar:hover {
width: 12px;
}
::-webkit-scrollbar-thumb:hover {
width: 12px;
}
div#marginDX:hover::-webkit-scrollbar {
width: 12px;
}
</style>
Cordiali saluti a tutti e help me please!