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

Question

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

当您开始滚动时div,默认行为是从左向右滚动:

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

它可能从右边开始吗？

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

在我的例子中,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())
})

检查这个演示小提琴