使用 CSS 溢出从右向左水平滚动:scroll [英] Scroll horizontally starting from right to left with CSS overflow:scroll

问题描述

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

So I am wondering if there is a possibility to have a different starting position with the overflow:scroll value;

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

When you start scrolling in a div the default behaviour is to scroll from left to right:

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

有没有可能从右边开始?

would it possible that it starts at the right?

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

在我的例子中 red 和 green 项目首先可见，我希望 green 和 blue 项目首先可见:)

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; 但没有运气

推荐答案

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

这篇关于使用 CSS 溢出从右向左水平滚动:scroll的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！