Visualizzazione dei risultati da 1 a 8 su 8
  1. #1

    Problema con scrollbar personalizzata

    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!

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Ciao, intuisco cosa stai cercando di fare ma col solo codice che hai postato non riesco a riprodurre la funzionalità della barra e tanto meno verificare il problema.

    Ti chiedo:
    Puoi postare un link ad una pagina pubblica dove verificare quanto indichi?
    In alternativa, puoi riprodurre l'elaborato su un playground (es. CodePen) così da fornire un "sscce"?

    Considera comunque che le regole CSS con i prefissi vendor (vedi ::-webkit-scrollbar) non sono standard, per cui la cosa funzionerà solo su specifici browser; se ti serve avere una funzionalità cross-browser dovrai rivalutare meglio la questione.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    No ma in realtà per riprodurlo basta avere un foglio qualsiasi con un testo un po' lungo così da farlo scrollare, comunque ci sono quasi al momento, ho fatto in modo che la barra sia sempre presente ma nascosta e all' hover sul div contenitore se il contenuto è scrollabile appaia , se non lo è rimanga invisibile ma lo spazio viene comunque allocato, cos' non shifta il contenuto:

    codice:
    <style>
             ::-webkit-scrollbar {
                visibility: hidden;
                background-color: #d2d2d2;
                width: 15px;
            }
            
             ::-webkit-scrollbar-thumb {
                visibility: hidden;
                border-radius: 10px;
                background-color: #5b5b5b;
                box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
            }
            
            body:hover::-webkit-scrollbar,
            body:focus::-webkit-scrollbar,
            body:hover::-webkit-scrollbar-thumb,
            body:focus::-webkit-scrollbar-thumb {
                transition: visibility 0.2s;
                visibility: visible;
            }
            
            body {
                overflow-y: scroll;
            }
        </style>

  4. #4
    Ho dovuto modificare alcune cose, e ora il problema sorge nuovamente, nel mio progetto posso usare anche jquery però non so come fare, ho un menu accordion con diverse voci che occupa tutta la pagina ma se l' accordion è chiuso non appare la barra di scorrimento perchè sta all' interno della dimensione della pagina, se però apro l' accordion ottengo uno sgradevole effetto che non riesco a muovere in nessuno modo di shift dei bottoni dell' accordion verso sinistra perchè appare la barra di scroll, qui di seguito ti metto 2 foto così capisci com' è la situazione, non so se sistemare la cosas con i css o tramite javascript e jquery e come..

  5. #5
    https://codepen.io/maxilboss93/pen/YzXyrpV, ora immagina dei bottoni che appaiono all' apertura dell' accordion e capisci che si accorciano per fare entrare la barra!

  6. #6

  7. #7
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Quote Originariamente inviata da Maxilboss93 Visualizza il messaggio
    https://codepen.io/maxilboss93/pen/YzXyrpV, ora immagina dei bottoni che appaiono all' apertura dell' accordion e capisci che si accorciano per fare entrare la barra!
    Continuo a non vedere il problema e non riuscire a riprodurlo.

    Perdonami ma mi viene male immaginare qualcosa per capire dove e come si presenta il problema ed eventualmente come poter intervenire per risolverlo; sarebbe più semplice se tu fornissi un esempio corretto col minimo indispensabile per poter riprodurre esattamente il problema in questione. Ti chiedo quindi se puoi modificare opportunamente il tuo Pen, altrimenti diventa complicato poterti aiutare; della serie "aiutaci ad aiutarti".

    Nell'ultimo codice che hai postato vedo che hai usato questo:
    codice:
            body {
                overflow-y: scroll;
            }
    così da forzare la presenza della barra di scorrimento, risolvendo quindi il problema iniziale, ma non lo vedo nel tuo Pen. Non puoi usare la stessa cosa?

    Cosa si dovrebbe vedere qui?
    Vedo l'immagine ma non mi aiuta a capire quale sia il problema. Puoi fornire indicazioni più precise?
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  8. #8
    trovatoooooo....
    codice:
     ::-webkit-scrollbar {
                background-color: transparent;
                width: 8px;
                background: url("assets/images/circle_g.svg");
            }
            
             ::-webkit-scrollbar-thumb {
                background: lightgray;
                border-radius: 10px;
                box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
            }
            
            body {
                overflow-y: overlay;
            }
    Ora vorrei che la barra si ingrandisse qunado ci passo sopra il mouse ma devo trovare come si fa!

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.