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

f3temu5u  于 2022-12-05  发布在  其他
关注(0)|答案(7)|浏览(222)

所以我想知道是否有可能有一个不同的起始位置与overflow:scroll的值;
div中开始滚动时,默认行为是从左向右滚动:

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

有没有可能从右边开始呢?

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

In my exampleredgreen项首先可见,我希望greenblue项首先可见:)
我试过direction:rtl;,但没有成功

kmb7vmvb

kmb7vmvb2#

我不知道有没有只使用CSS的解决方案,但是你可以使用Jquery来改变滚动条的初始位置,如下所示:

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

检查此Demo Fiddle

xmd2e60i

xmd2e60i3#

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

qf9go6mv

qf9go6mv4#

我一直在一个项目中工作,对我来说,这样的工作非常好:

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

uajslkp65#

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

请观看此feedle以了解结果:http://jsfiddle.net/mm37pqxa/

7y4bm7vi

7y4bm7vi6#

您可以使用一行jQuery来实现这一点:
$("#box").scrollLeft(480);

dauxcl2d

dauxcl2d7#

使用rtl方向

overflow: auto; 
direction:rtl;

相关问题