web-dev-qa-db-fra.com

Faites défiler horizontalement en commençant de droite à gauche avec débordement CSS: faites défiler

Je me demande donc s'il y a une possibilité d'avoir une position de départ différente avec le overflow:scroll valeur;

Lorsque vous commencez à faire défiler dans un div le comportement par défaut est de faire défiler le formulaire de gauche à droite:

|<--Scrollbar-Starting-Left-->_________________________________________________|

serait-il possible que cela commence à droite?

|_________________________________________________<--Scrollbar-Starting-Right-->|

Dans mon exemple les éléments red et green sont d'abord visibles, j'aimerais que l'élément green et blue soit visible en premier :)

J'ai essayé direction:rtl; mais pas de chance

javascriptjqueryhtmlcssscroll
19
MMachinegun

Vous pouvez bien sûr utiliser direction:rtl

document.querySelector('input').addEventListener('input', function(){
  document.querySelector('.box').scrollLeft = this.value;
})
.box{
  width: 320px;
  height: 100px;
  border:1px solid red;
  overflow: scroll;
  direction: rtl;  /* <-- the trick */
}

.box::before{ content:''; display:block; width:400%; height:1px; }
<div class='box'></div>
<br>
<input placeholder='scrollLeft value'>

FiddleDemo

Cela peut être utile en utilisant direction http://css-tricks.com/almanac/properties/d/direction/

35
Sajad Karuthedath

Je ne connais aucune solution avec seulement CSS mais vous pouvez utiliser Jquery pour changer la position initiale de la barre de défilement comme ceci:

$(document).ready(function(){
    $('#box').scrollLeft($(this).height())
})

Cochez cette ( violon de démonstration

3
DaniP

Avec javascript, vous pouvez simplement définir la propriété scrollLeft lorsque la page est chargée (en utilisant el.scrollLeft = el.scrollWidth - el.clientWidth;).

2
vbo

J'ai travaillé sur un projet et pour moi fonctionne très bien comme ceci:

overflow-x: scroll;   
overflow-y: hidden;   
white-space: nowrap;
2
Diego De Granda

Il y a un comportement inattendu si vous ajoutez une parenthèse fermante à la fin du texte pour la première réponse. (Testé en Chrome 54)

<div id="box">
    <div id="inner_box">
        <div class="item" style="background:red;"></div>
        <div class="item" style="background:green;"></div>
        <div class="item" style="background:blue;">te(st)</div>
    </div>
</div>

Regardez ce feedle pour le résultat: http://jsfiddle.net/mm37pqxa/

1
Benoît Condaminet

Vous pouvez le faire avec une seule ligne de jQuery:

$("#box").scrollLeft(480);

0
ElendilTheTall