Sto cercando di essere in grado di scorrere all'interno di un div ma senza mostrare la barra di scorrimento effettiva.Utilizzare jQuery per nascondere la barra di scorrimento div, ma mantenere lo scorrimento?
ho bisogno che l'utente sia in grado di scorrere con la rotella
Qualcuno ha idee su come posso fare questo?
Grazie!
Beh, il vero motivo sarebbe perché si vorrebbe che, ma dal momento che lei ha chiesto che sarà cercare di risolvere il problema.
Avrete bisogno di due div. Uno annidato dentro l'altro.
<div class="outside">
<div class="inside">
Scrolling Content Goes here.
</div>
</div>
Avrai quindi bisogno di alcuni CSS per risolvere questa situazione. L'overflow: auto ti darà lo scrolling una volta superata la limitazione di altezza. Ho messo una larghezza casuale per motivi di esempio. Metti un padding sul lato destro per spingere la barra di scorrimento fuori dalla classe div .outer. In questo modo non dovrai preoccuparti dei contenuti che vanno sotto il div .outer.
.inside { width: 500px; overflow: auto; height: 300px; padding-right: 20px; }
per la classe esterna è necessario specificare la stessa altezza, stessa larghezza, ma overflow: nascosto.
.outside { width: 500px; height: 300px; overflow: hidden; }
ESEMPIO: jsFiddle
Questo non è coerente in diversi livelli di zoom - la larghezza della scollbar di solito cambia con il livello di zoom rendendo così visibile la scollbar (una configurazione del browser davvero strana). Inoltre, forse più realistici degli zoom eccessivamente difficili, i diversi browser avranno diverse barre di scorrimento larghe che non lo rendono così universale come potrebbe essere. Questo è davvero così oscuro che nessuno dovrebbe (di solito deve) preoccuparsi di ciò, ma volevo solo indicarlo. – lindhe
Forse è possibile utilizzare css e nascondere o eseguire alcuni stili con esso in modo che sembri nascosto. Ecco uno dei link che ho trovato.
Questo è stato testato in IE e Firefox - sia gestire imbottitura un po 'diverso, in modo da sto utilizzando altezza e larghezza per tenere conto di visibilità dei contenuti.
È logico disporre di 2 contenitori, uno per il contenitore e uno per il contenuto, tuttavia poiché i browser gestiscono il riempimento in modo diverso, è molto più difficile di quanto pensiate per spingere la barra di scorrimento nell'area nascosta. Questo è dove il terzo contenitore è disponibile in:
Questo si ottiene con i trucchi del foglio di stile: il foglio di stile è stato commentato in modo da poter seguire le istruzioni/i commenti in esso.
Spero che questo aiuti! :)
<html>
<head>
<style type="text/css">
/* Propetary paragraph style */
p {
padding: 0px;
margin: 0px 0px 7px 0px;
}
/* Global notes:
- Since the
/* This is the outer container - set desired height and width here */
.scrollabelDivContainer {
width: 300px;
height: 100px;
padding: 0px;
margin: 0px;
overflow: hidden;
border: 2px dashed #ddd;
}
/* This is the div inside the container - the height should
match the container and width be more (to push the
scrollbar into the hidden content area) */
.scrollableDiv {
width: 400px;
height: 100px;
padding: 0px;
margin: 0px;
overflow-x: hidden;
overflow-y: scroll;
}
/* This houses the content. Set the widget 10px less than the
container width to ensure the content is visible in all browsers */
.scrollableDivContent {
width: 290px;
padding: 0px;
margin: 0px;
overflow: auto;
}
</style>
</head>
<body>
<div class="scrollabelDivContainer">
<div class="scrollableDiv">
<div class="scrollableDivContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt consequat urna ut tincidunt. Vestibulum molestie leo quis dui malesuada vulputate eget tempor purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras nec orci enim, vel tristique lectus. Sed lobortis ultrices enim eu consequat.</p>
<p>Integer magna lectus, iaculis sit amet interdum nec, ullamcorper ut purus. Sed aliquam sollicitudin lacinia. Proin porttitor aliquet lorem, eu dictum lorem suscipit et. Ut vestibulum eros quis turpis auctor id sollicitudin risus faucibus. Quisque volutpat nibh ut sem euismod rutrum. Ut eget orci non quam scelerisque laoreet sit amet a metus. Mauris aliquam facilisis lacinia.<p>
</div>
</div>
</div>
</body>
</html>
Come si desidera poterlo scorrere se manca la barra di scorrimento? topo centrale? fare clic trascinando? in bilico sopra o sotto? –
Drat! Scusate! Hai ragione! :) Scrollwheel/mouse centrale. (Aggiornamento domanda) – Eax
Si potrebbe fare qualcosa di simile con css, hmm .... http: // jsfiddle.net/c7tR8/l'unico problema è che non è molto ovvio che ci sia più contenuto nel div quando non è possibile vedere una barra di scorrimento. –