html - scorrimento - styling scroll css




Disattiva la barra di scorrimento orizzontale a causa di un DIV con posizione: assoluta che è al di fuori della pagina (5)

Ho un elemento assolutamente posizionato che è "esterno" alla pagina, ma voglio che i browser (sto usando Firefox 3) non visualizzino barre di scorrimento orizzontali. Sembra che la visualizzazione di un div posizionato a sinistra (ad es. "Left: -20px") sia ok, e non viene mostrata alcuna barra di scorrimento. Tuttavia la stessa cosa a destra ("right: -20px") mostra sempre la barra di scorrimento. È possibile nascondere la barra di scorrimento, ma per mantenere lo scorrimento standard possibile? Voglio dire, voglio solo disabilitare lo scorrimento a causa di questo elemento posizionato in modo assoluto, ma per continuare a scorrere a causa di altri elementi (so che posso disabilitare completamente le barre di scorrimento, non è quello che voglio).

<!DOCTYPE html>
<html>
<body>
  <div id="el1" style="position: absolute; top: 0; background-color: yellow; left: -20px;">
    element
  </div>
  <div id="el2" style="position: absolute; top: 0; background-color: yellow; right: -20px;">
    element
  </div>
  <h1>Hello</h1>
  <p>world</p>
</body>
</html>

Aggiungi questo al tuo CSS:

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

Gli stili overflow-x e -y non sono riconosciuti da IE. Quindi, se sei interessato solo a Firefox 3, funzionerà correttamente. Altrimenti, puoi usare qualche javascript:

document.documentElement.style.overflow = 'hidden';  // firefox, chrome
document.body.scroll = "no";    // ie only

Metti il ​​seguente stile

html {overflow-x:hidden;}

L'ho provato su IE 8, FF e Chrome.


Quello che devi fare è aggiungere un wrapper al di fuori delle tue div.

Ecco il CSS: chiamo la mia classe 'main_body_container'

.main_body_container {
    min-width: 1005px; /* your desired width */
    max-width: 100%;
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
}

Spero che sia d'aiuto :)

Aggiornare

Crea una penna per questo, guardala here


Questo può infatti essere fatto usando il diritto CSS senza alcuna restrizione sulla larghezza della pagina, ecc. Può essere fatto da:

  1. Crea un div con overflow nascosto che è assolutamente posizionato nell'angolo in alto a sinistra della pagina. Rendi la sua larghezza e altezza al 100%
  2. Crea un altro div che è lo stesso, ma senza overflow nascosto
  3. Aggiungi una classe per le div che avvolgono il contenuto di quelle create, rendendo la sua posizione relativa e dandole la larghezza desiderata per il contenuto della pagina principale
  4. Aggiungi il contenuto di quella classe in ciascuna delle div che hai creato.

Il contenuto del primo div sarà allineato correttamente con il contenuto del secondo div, ma qualsiasi suo contenuto che vada oltre il perimetro della finestra verrà troncato.

Ecco un esempio funzionante che mantiene l'immagine in una posizione fissa rispetto al resto del contenuto, senza utilizzare JavaScript:

#widthfitter {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#contentWrapper {
  width: 100%;
  position: absolute;
  text-align: center;
  top: 0;
  left: 0;
}

.content {
  width: 600px;
  position: relative;
  text-align: left;
  margin: auto;
}
<div id="widthfitter">
  <div class="content">
    <img src="https://i.stack.imgur.com/U5V5x.png" style="position:absolute; top: 240px; left: 360px" />
  </div>
</div>
<div id="contentWrapper">
  <div class="content">
    Tested successfully on:
    <ul>
      <li>IE 8.0.6001.18702IS</li>
      <li>Google Chrome 17.0.963.46 beta</li>
      <li>Opera 10.10</li>
      <li>Konqueror 4.7.4</li>
      <li>Safari 5.1.5</li>
      <li>Firefox 10.0</li>
    </ul>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
      ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
      augue duis dolore te feugait nulla facilisi.
    </p>
  </div>
</div>


Sono stato in grado di risolvere questo problema modificando l'attributo position dell'elemento su fixed:

position: fixed;

Mai più scorrimento orizzontale causato da questo elemento ma scorrimento orizzontale ancora causato da altri elementi.





css-position