2014-04-12 17 views
5

sto guardando questa pagina demo:Impedisci lo scorrimento di un div con i CSS?

http://www.ymc.ch/sandbox/hamburger/mobile-menu-demo.html

Che ha questo codice dietro di esso:

https://github.com/ymc-thzi/mobile-menu-hamburger

In generale Funziona benissimo, ma quando il menu è aperto sul mio MacBook Posso usare due dita per scorrere e spostare il div del corpo bianco intorno. Come potrei impedirlo usando il CSS?

+0

Sospetto che tu abbia bisogno di JS per quello. A proposito, hai provato a giocare con https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events –

+0

@roko js non è necessario, vedere la mia risposta semplice –

+0

Il solito overflow in CSS non funziona lavorare Non sono nemmeno sicuro se questo conta come "scrolling" per dire ma quando uso due dita sul trackpad posso spostare il div del contenuto bianco attorno allo schermo (quando il menu è aperto). Anche altre persone vedono questo problema? – asolberg

risposta

6

Se si vuole sempre per evitare lo scorrimento, si potrebbe usare qualcosa di simile:

div { 
    overflow-x: hidden; 
    overflow-y: hidden; 
} 

Basta essere consapevoli che qualsiasi contenuto che si estende oltre il bordo del div sarà hidden :)

In caso contrario, se stai cercando un menu web mobile, controlla jQuery mobile.

+1

Nascosto verrà interrotto il contenuto –

+0

Sì, se il contenuto si estende fuori dal div, verrà interrotto. –

+0

Un buon punto, se lo vuole tagliato, ho pensato che stesse cercando di uccidere le barre di scorrimento e non nascondere i contenuti. Forse ho frainteso –

0

Le barre di scorrimento nell'URL di esempio sono nel corpo, quindi è necessario impostare la proprietà di overflow sul corpo da nascondere quando il menu è aperto e su auto quando il menu è chiuso.

Nel file JavaScript, è possibile aggiungere jQuery(document.body).css('overflow', 'hidden') nella funzione jQuery("#hamburger").click e jQuery(document.body).css('overflow', 'auto') nella funzione jQuery("#contentLayer").click.

Problemi correlati