Barra de desplazamiento a la izquierda usando CSS

Aunque no es muy normal colocar la barra de desplazamiento vertical a la izquierda, por motivos estéticos puede ser conveniente. Este sencillo código lo consigue fácilmente. Por supuesto respetando el estándar de CSS y XHTML.


<style type=”text/css”>
.i {
margin:5px auto;
width:300px;
height:300px;
border:1px solid black;
unicode-bidi:bidi-override;
direction:rtl;
overflow:auto;
}
.i p {
text-align:left;
margin:5px;
direction:ltr;
}
</style>

<div class=”i”>
<p>
Etiam fermentum mi at quam. Pellentesque ornare tempor odio. Praesent sit amet metus. Nunc mollis hendrerit lorem. Nulla facilisi. Nam semper arcu quis odio. Nam diam nisl, pretium in, consequat dapibus, elementum vitae, ligula. Mauris pharetra dapibus justo. Sed vitae nunc. Nulla risus. Etiam eros. Proin rhoncus neque vel ligula. Etiam sed purus a magna scelerisque lobortis. Vivamus dui tortor, auctor quis, accumsan eget, tristique sed, sapien. Donec turpis felis, luctus non, facilisis non, convallis volutpat, mi. Suspendisse ipsum. Aenean quis turpis id quam feugiat convallis.
</p>
<p>
Sed convallis nisi sed ante egestas convallis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin sodales, diam sit amet accumsan ultrices, dui pede vulputate pede, vitae iaculis massa neque condimentum enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc adipiscing pulvinar turpis. Suspendisse ipsum nunc, lobortis sit amet, pulvinar ut, tempor vel, leo. Fusce mauris lectus, volutpat vel, aliquet at, iaculis eget, nibh. Nunc ut purus id nibh fringilla dictum. Aenean vitae nibh. Pellentesque augue enim, faucibus ut, consequat ac, interdum vitae, tellus. Ut augue lorem, sollicitudin sit amet, rhoncus rhoncus, suscipit non, neque. Donec imperdiet, orci quis facilisis bibendum, tortor purus egestas dolor, at lacinia augue ante a ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus tempor. Sed porta, lectus sed dapibus commodo, risus urna ultricies ligula, vitae mattis lectus tellus at nisi. Donec enim massa, varius a, tincidunt sit amet, congue sed, sem.
</p>
</div>

Ejemplo funcionando de la barra de desplazamiento a la izquierda.

Publicado en Css, Diseño Web
2 Comentarios en “Barra de desplazamiento a la izquierda usando CSS
  1. claudia alguien te mira dice:

    hola

    “arcu quis odio. ”
    “ornare tempor odio. ”
    “Sed convallis nisi sed ante egestas convallis”

    sacanos de una duda……que idioma es lo de ese discurso

    y por favor no nos digas que es java que ofendes nuestra inteligencia

  2. Carlos Egea dice:

    Hola, estos párrafos forman parte del “Lorem Ipsum”. Es un texto que se suele usar en ejemplos de diseño. Yo he puesto unos párrafos al azar.
    No conozco la lengua, pero es un derivado del latín clásico. Puedes ver más información aquí:
    http://es.wikipedia.org/wiki/Lorem_ipsum
    http://www.lipsum.com/

    Un saludo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

Información básica sobre protección de datos
Responsable: Carlos Egea Oróñez
Finalidad: Moderación de comentarios
Legitimación: Consentimiento del interesado
Destinatarios: No se cederán datos a terceros, salvo obligación legal. Los datos quedarán almacenados en los servidores de OVH.ES, situados en la Unión Europea (política de privacidad de OVH.ES)
Derechos: Acceso, rectificación y supresión de tus datos. Puedes ejercer estos derechos enviando un correo electrónico a carlosegea@gmail.com
Si lo deseas puedes consultar más información sobre protección de datos de esta web: política de privacidad.