所以我想知道是否有可能与overflow:scroll
值有不同的起始位置;
当您开始在div
中滚动时,默认行为是从左向右滚动:
|<--Scrollbar-Starting-Left-->_________________________________________________|
它可能从右边开始吗?
|_________________________________________________<--Scrollbar-Starting-Right-->|
In my example red
和green
项目首先可见,我想首先看到green
和blue
项目:)
我试过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'>
这可能是有用的方向http://css-tricks.com/almanac/properties/d/direction/
我不知道任何只有CSS的解决方案,但你可以使用Jquery来改变滚动条的初始位置,如下所示:
$(document).ready(function(){
$('#box').scrollLeft($(this).height())
})
检查这个Demo Fiddle
使用javascript,您可以在页面加载时设置scrollLeft属性(使用el.scrollLeft = el.scrollWidth - el.clientWidth;
)。
如果您在最顶层答案的文本末尾添加右括号,则会出现意外行为。 (在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>
你可以用一行jQuery来做到这一点:
$("#box").scrollLeft(480);
我一直在一个项目工作,对我来说非常好,这样:
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;