Come impedire lo scorrimento dello schermo sulla resistenza del mouse quando un elemento posizionato in modo assoluto è (parzialmente) fuori dallo schermo?

Non voglio che la mia pagina web scorra. Ho uno <body> di larghezza 100%, ho impostato il suo overflow su hidden e generalmente funziona. Nessuna barra di scorrimento, nessun movimento della rotellina del mouse o del touchpad. Ma se clicco e trascino da qualche parte, posso ancora scorrere.Come impedire lo scorrimento dello schermo sulla resistenza del mouse quando un elemento posizionato in modo assoluto è (parzialmente) fuori dallo schermo?

Il puzzolente è che ho un div posizionato in modo assoluto in modo che si attacchi all'esterno del suo genitore, parzialmente (e talvolta interamente) fuori dallo schermo. Per una manciata di motivi, non posso aggirarlo adesso.

Questo violino illustra il mio problema (sto vedendo in WebKit), http://jsfiddle.net/ax5x7/2/

Trascinando praticamente ovunque a destra nel codice HTML causerà la pagina per scorrere lungo. È difficile tornare indietro perché non ci sono barre di scorrimento, quindi se lo fai per errore, sembra male.

Poking da queste parti ha trovato un suggerimento relativo allo disableSelection() deprecato di jQuery, ma a meno che non lo stia facendo male (l'ho applicato al corpo così come a tutti i bambini) non sembra impedire il comportamento. Ho anche trovato una domanda di un paio d'anni che non sembrava avere una soluzione soddisfacente. Il bandaid è un po 'kludgy, preferirei non scorrere fino a (0,0) su un intervallo.

fonte

2013-05-28 Terraflubb

Ciò funzionerà, e non sarà disattivare la selezione di testo:

$(document).on('scroll', function() { 
    $(document).scrollLeft(0); 
});

È possibile aggiungere $(document).scrollTop(0); se si desidera disabilitare lo scorrimento verso il basso.

Ecco un jsFiddle

fonte

2013-05-28 04:00:31

Grazie, questo ha funzionato per me. Mi viene un brivido quando inizio a trascinare, ma almeno lo schermo non si fa fregare. – Terraflubb

Funziona alla grande. Semplice e fantastico in Firefox e Chrome. – kwoxer

Se ho capito bene la tua domanda, questo dovrebbe farlo.

http://jsfiddle.net/ax5x7/3/

non esitate a dirmi di più sul problema e io aggiornare di conseguenza.

Ho rimosso il padding/margine sul tag body.

aggiornato il biggestThing

di simile a questa:

#biggestThing { 
    box-sizing: border-box; 
    border: 1px solid black; 
    width: 100%; 
    background-color: #eee; 
    height: 5em; 
}

fonte

2013-05-28 03:29:11 lifeiscontent

grazie per la risposta. Non ti ho minimizzato, ma sfortunatamente non ho il lusso di regolare la formattazione per tutti i miei elementi.Il mio esempio sopra era un esempio distinto del problema, sfortunatamente l'app in questione è più complessa e non sarei in grado di dare la caccia a tutti i CSS incriminati, correggerlo e preservare l'aspetto, in tempo per la spedizione. – Terraflubb

si può provare questo, ma si romperà selezione di testo:

$('html, body').on("mousedown", null, function(event) { 
    return false; 
});

http://jsfiddle.net/samliew/ThCJf/

fonte

2013-05-28 03:46:52

È stato difficile decidere quale risposta accettare, vorrei poter averli accettati entrambi. Questo funziona davvero bene, senza il brivido, quindi sembra migliore, ma mi richiede di andare oltre la mia app per assicurarsi che non si rompa nulla sul lato. FWIW, lo farò. Grazie. – Terraflubb

finché non si utilizzano i gestori di mouse su nessuno dei propri elementi/pulsanti e non è necessario scorrere affatto, si dovrebbe andare bene. Altrimenti, potresti abilitare il mouse per elementi specifici. –

Il problema che ho riscontrato è che ho perso la capacità di concentrarmi su alcuni campi di inserimento del testo. Avrei potuto autorizzarli in whitelist, ma dal momento che ciò richiederebbe comunque un po 'di caccia per vedere cos'altro ho rotto, ho solo morso il proiettile e ho mantenuto la mia div scomoda assoluta all'interno del documento. – Terraflubb

provo ad aggiungere overflow:hidden; nel css del page_wrapper.

fonte

2014-05-30 10:02:28 isxaker

Per un'implementazione pura JS che non mi dà i brividi su Chrome, almeno:

function preventScroll(){ 
    var element = document.getElementById('my-element-id'); 
    element.onscroll = function(){ 
     element.scrollLeft = 0; 
    }; 
}

fonte

2015-10-13 16:15:04 SethWhite

Come impedire lo scorrimento dello schermo sulla resistenza del mouse quando un elemento posizionato in modo assoluto è (parzialmente) fuori dallo schermo?

risposta

Problemi correlati