使用 CSS overflow:scroll 从右向左水平滚动

Question

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

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

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

它有可能从右边开始吗？

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

In my example the red and green items are first visible, I’d like the green and blue item to be visible first : )

我试过 direction:rtl; 但没有成功

原文由 MMachinegun 发布，翻译遵循 CC BY-SA 4.0 许可协议

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'>

小提琴演示

使用方向 http://css-tricks.com/almanac/properties/d/direction/ 这可能很有用

原文由 Sajad Karuthedath 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

检查这个 演示小提琴

原文由 DaniP 发布，翻译遵循 CC BY-SA 3.0 许可协议