使用CSS溢出从右向左水平滚动：滚动

Question

所以我想知道是否有可能与overflow:scroll值有不同的起始位置;

当您开始在div中滚动时，默认行为是从左向右滚动：

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

它可能从右边开始吗？

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

In my example red和green项首先可见，我希望green和blue项首先可见：）

我试过direction:rtl;但没有运气

Answer 1

您当然可以使用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

使用方向http://css-tricks.com/almanac/properties/d/direction/

可能会有用

Answer 2

我不知道任何只有CSS的解决方案，但您可以使用Jquery来更改滚动条的初始位置，如下所示：

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

选中此Demo Fiddle

Answer 3

使用javascript，您可以在页面加载时设置scrollLeft属性（使用el.scrollLeft = el.scrollWidth - el.clientWidth;）。

Answer 4

我一直在一个项目中工作，而且对我来说非常有效：

overflow-x: scroll;   
overflow-y: hidden;   
white-space: nowrap;

Answer 5

如果在最顶层答案的文本末尾添加右括号，则会出现意外行为。 （在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>

观看此Feed的结果：http://jsfiddle.net/mm37pqxa/

Answer 6

您可以使用一行jQuery执行此操作：

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