Me gustaría tener un div desplazable pero la barra de desplazamiento debería estar en el lado derecho del navegador como predeterminado (pero no en el lado derecho de div). Lo he visto en Facebook (ceter div - contentArea se desplaza por la barra de desplazamiento del navegador del lado derecho).¿Cómo hacer DIV desplazable con barra de desplazamiento fuera de div como en Facebook?
La forma en que Facebook lo hace es teniendo todo el contenido que no se desplaza tiene un position de fixed. De esta forma, la barra de desplazamiento del navegador nativo parecerá desplazarse solo por el área central, mientras que en realidad el resto de la página se fijará en su posición.
Un ejemplo muy simple de esta:
Ahora imaginemos lo anterior, pero con todos los elementos de configuración no desplazable como el #header.
EDITAR
Aquí es un ejemplo un poco más complejo, con tres columnas:
En realidad, el div su estamos hablando no es desplazable, los otros div elementos son fijos
que le da la impresión de la barra de desplazamiento está fuera del div, mientras que en realidad se está desplazando toda la página, la izquierda y los elementos div correctos son fijos es decir: usando el estilo position: fixed;
espero que esto ayuda mucho ... a ver qué se puede hacer desde aquí, intentado comentar el código tanto como sea posible ...
<html>
<head>
<title>Example</title>
<style>
#head{
position:fixed; /* this will make the div stay in the same place */
width:100%; /* this will size the dive to the width of the window */
height: 42px; /* this will make the height of the div 42px */
top:0px; /* make sure the div is at the very top */
left:0px; /* make sure the div is as far left as possible */
background: #009933; /* this will make the background of the div into a green color */
}#head_slack{ /* we make this one the same size so no text is ever covered */
width:100%; /* make sure the width of the slack is 100% */
height: 42px; /* make sure the hight of the slack is the same as the head fixed */
}body{
margin: 0px; /* takes out the default white border around the page */
}#leftFixed{
width 150px; /* set the width the same as the with of the table data cell containing the div */
position: fixed; /* make sure it stays in place */
left: 0px; /* make sure the div is at the left */
top: 45px; /* make sure the div is below the head div */
}#rightFixed{
width 200px; /* set the width the same as the with of the table data cell containing the div */
position: fixed; /* make sure it stays in place */
right: 0px; /* make sure the div is at the right */
top: 45px; /* make sure the div is below the head div */
}
</style>
</head>
<body>
<div id="head">This is the fixed header</div>
<div id="head_slack">this is the header that takes the slack</div>
<table width="100%">
<tr>
<td width="150px" valign="top">
<div id="leftFixed">This is fixed content on the left</div>
</td>
<td>
This is the scrollable content
</td>
<td width="200px" valign="top">
<div id="rightFixed">this is fixed content on the right</div>
</td>
</tr>
</table>
</body>
</html>
Una manera simple que he encontrado es:
#divID{
overflow: hidden;
width: calc(1024px + 0);
}
#divID:hover{
overflow-y:scoll;
}
Por alguna razón esto muestra la barra de desplazamiento fuera de la div
Creo que significa 'position: fixed;' en lugar de 'absolute'. – Kokos
@kokos: modified :) –
No, 'fixed' se coloca en relación con la ventana,' absolute' se coloca en relación con el documento. Si le das a los divs 'fijos' una posición 'absoluta', seguirán desplazándose con el resto de la página. http://jsfiddle.net/tcaVN/2/ – Kokos