div con menu e textbox scrollabile

**drugo1978** · 28-02-2011, 16:41

Carissimi,
ho un problema che non riesco a gestire come vorrei, sono in cerca di suggerimenti.

A circa 300 pixel dal top della pagina ho un contenitore ( DIV A ) che ne contiene 2:
- DIV B: posizionato in alto come header, che contiene una serie di link anchor.
- DIV C: contiene una textbox con scrollbar verticale, contenente il corpo delle pagine.

I link anchor del DIV B puntano a determinati paragrafi del testo di DIV C,
solo che vorrei evitare lo scroll dell'intera pagina sul punto ancorato, vorrei far scorrere solo il testo contenuto nella textbox scrollabile.

Come fare? Dovrei usare javascript? Qualcuno saprebbe indicarmi un codice appropriato?

Grazie mille

**Mich_** · 28-02-2011, 17:24

Probabilmente devi solo definire un'altezza per il tuo divC, e farci scorrere il testo all'interno.
Esempio:

codice:

<div id="divC" style="length:80%; overflow:auto;">
  

 qui il testo
  </p>
  

 qui il testo 2
  </p>
  

 qui il testo 3
  </p>
</div>

Se non funziona, o se non capisci, facci vedere il codice HTML e CSS dei blocchi B e C (non serve tutto il testo, basta i blocchi significativi) e il DOCTYPE che usi (anche tramite link, se possibile)

**Prill** · 28-02-2011, 17:31

Esempio

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titolo</title>

<style type="text/css">
#contenitore { 
	width: 600px;
}
#box { 
	height: 250px;
	overflow: auto;
	font-family: Verdana, Arial;
	font-size: 9pt;
	color: gray;
	text-align:left;
	background-color:#F5F5F7;
}
#box p{ 
	margin-top:20px;
	margin-bottom: 20px;
}
</style>
</head>
<body>

<div id="contenitore">
   

Link1 - Link2 - Link3 - Link4 - Link5 - Link6 
    - Link7 -  Link8 - Link9 - Link10</p>
   <div id="box">
	

<a name="link1" id="link1"></a>LINK1</p>
	

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
	

<a name="link2" id="link2"></a>LINK2</p>
	

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
	

<a name="link3" id="link3"></a>LINK3</p>
	

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
	

<a name="link4" id="link4"></a>LINK4</p>
	

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
	

<a name="link5" id="link5"></a>LINK5</p>
	

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
	

<a name="link6" id="link6"></a>LINK6</p>
	

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
	

<a name="link7" id="link7"></a>LINK7</p>
	

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
	

<a name="link8" id="link8"></a>LINK8</p>
	

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
	

<a name="link9" id="link9"></a>LINK9</p>
	

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
	

 <a name="link10" id="link10"></a>LINK10</p>
	

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
</div>
</body>
</html>

**drugo1978** · 28-02-2011, 18:08

grazie delle risposte,
il mio codice è in linea di massima esattamente come riportato da Prill.

Il problema è che prima della textbox dell'esempio di Prill c'è altro contenuto per un totale di circa 400 pixel per cui se clicco ad un link tutta la pagina sale fino al punto ancorato.

Provate a modificare il codice di prill inserendo nel contenitore un margin-top di 400 pixel...

attendo news.. grazie

**drugo1978** · 02-03-2011, 12:52

nessuno sa aiutarmi?

**ResianTaxidrive** · 02-03-2011, 13:50

ho messo al codice di prill al contenuto un margin-top di 400px; ma tutto funziona normalmente.

**drugo1978** · 02-03-2011, 14:16

Originariamente inviato da ResianTaxidrive
ho messo al codice di prill al contenuto un margin-top di 400px; ma tutto funziona normalmente.

Non si scrolla in alto anche lo schermo al primo click? forse hai una risoluzione schermo più alta.
Aumenta ancora il margin-top, portalo a 800px ad esempio.

**Prill** · 02-03-2011, 18:41

sì, drugo1978, la pagina scrolla, ma è necessario a risoluzioni più basse (e non solo per quelle, pensa a chi naviga con la finestra del browser ridotta e un po' di barre che la accorciano ulteriormente) perché non ci si renderebbe conto dell'effetto prodotto dal link essendo il div con le ancore tanto più in basso. Una soluzione con javascript, senza il refresh della pagina, per scrollare il div risolverebbe il tuo problema ma potrebbe crearne ai visitatori

Discussione: div con menu e textbox scrollabile

Strumenti discussione

Ricerca discussione

Visualizza

div con menu e textbox scrollabile

Permessi di invio