problema scorrimento con troppopieno CSS: scroll HTML

Ecco jsFiddle per una migliore comprensione: http://jsfiddle.net/BzYcZ/problema scorrimento con troppopieno CSS: scroll HTML

ho qualche div che hanno le barre di scorrimento.

Quello che voglio è quando utilizzo lo scroll del mouse per interrompere lo scorrimento quando si raggiunge la fine del div e non per scorrere l'intera pagina.

Quello che succede è che quando raggiungo la fine del div l'intera pagina inizia a scorrere.

Capisco che si tratta di browser, ma c'è qualche evento JS in grado di gestire questo tipo di situazione & impedire lo scorrimento dell'intera pagina mentre il mio cursore si trova su questo elemento div.

EDIT:

voglio essere in grado di scorrere l'intera pagina, ma solo quando il mouse è fuori di questo div.

SOLUZIONE

.noscroll 
{ 
    position: fixed; 
    overflow-y: scroll; 
    width: 100%; 
}

E qui è la parte JavaScript:

$('.small_content').hover(
    function() { 
     $('body').addClass('noscroll'); 
    }, 
    function() { 
     $('body').removeClass('noscroll'); 
    } 
);

Ecco link al jsFiddle lavorare: http://jsfiddle.net/BzYcZ/3/

fonte

2012-08-08 sensor

Personalmente questa è una funzionalità che mi piace e uso molto. Non averlo mi infastidirebbe. – Bojangles

L'impostazione 'body {overflow: hidden}' impedirà lo scorrimento della pagina. Ma perché non avere solo un'altezza contenuta nella pagina in modo che non ci sia un overflow da nascondere? – Joe

@Joe Ho aggiornato la mia domanda in quanto voglio essere in grado di scorrere il corpo. Il che significa che dovrebbe essere coinvolta una sorta di JavaScript a seconda della posizione del mouse, disabilitando la capacità di scorrimento del corpo. – sensor

si potrebbe usare jQuery e congelare eventuali barre di scorrimento di the body/html

(a proposito, jQuery è una libreria JavaScript che rende la codifica più facile e veloce: http://jquery.com/)

Esempio:

$('.yourdivclass').hover(
function() { 
    $('html, body').css("overflow", "hidden"); 
}, 
function() { 
    $('html, body').css("overflow", "auto"); 
});

UPDATE:

Per mantenere le barre di scorrimento e semplicemente disabilitare, seguire questa soluzione: Just disable scroll not hide it?

Esempio qui: http://jsfiddle.net/BzYcZ/2/

Aggiornato Javascript qui:

$('.small_content').hover(
function() { 
    $('body').addClass('noscroll'); 
}, 
function() { 
    $('body').removeClass('noscroll'); 
});

L'extra CSS:

body.noscroll 
{ 
    position: fixed; 
    overflow-y: scroll; 
    width: 100%; 
}

fonte

2012-08-08 14:16:03 jackJoe

In realtà voglio essere in grado di scorrere il corpo/html a seconda di dove si trova il mio cursore – sensor

@sensor Ho aggiornato la mia risposta con un esempio, nasconderà le barre di scorrimento del corpo/html quando ci si libra con il div class' yourdivclass' – jackJoe

Grazie per la tua risposta! L'ho già provato, ma c'è un brutto sfarfallio della pagina, poiché la barra di scorrimento dell'intera pagina scompare quando l'overflow è nascosto. – sensor

È possibile aggiungere overflow:hidden struttura al corpo se non si desidera scorrere contenitore corpo a tutti, oppure è possibile utilizzare jQuery per congelare la barra di scorrimento del contenitore del corpo, come avviene su Facebook.

fonte

2012-08-08 14:18:29

problema scorrimento con troppopieno CSS: scroll HTML

risposta

Problemi correlati