blocks|key|2850409|text|我不知道任何只使用CSS的解决方案，但是您可以使用Jquery来更改滚动条的初始位置，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2850410|$(document).ready(function(){
++++$('#box').scrollLeft($(this).height())
})|code-block|syntax|javascript|2850411|检查这个演示Fiddle|offset|length|2850412|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/HyRTx/1/^0|0|0|4|8|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>I don't Know about any solution with just CSS but you can use Jquery to change the initial position of the scrollbar like this:</p>

<pre><code>$(document).ready(function(){
    $('#box').scrollLeft($(this).height())
})
</code></pre>

<p>Check this <a href="http://jsfiddle.net/HyRTx/1/" rel="noreferrer"><strong>Demo Fiddle</strong></a></p>


blocks|key|2850441|text|使用javascript，您只需在加载页面时设置scrollLeft属性(使用el.scrollLeft+=+el.scrollWidth+-+el.clientWidth;)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2850442|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollLeft^0|13|1C|O|A|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

<p>With javascript you can just set <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollLeft" rel="nofollow">scrollLeft</a> property when page gets loaded (using <code>el.scrollLeft = el.scrollWidth - el.clientWidth;</code>).</p>


blocks|key|1004386|text|你当然可以使用direction:rtl|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1004387|​|1004388|document.querySelector('input').addEventListener('input',+function(){
++document.querySelector('.box').scrollLeft+=+this.value;
})|code-block|syntax|javascript|1004389|.box{
++width:+320px;
++height:+100px;
++border:1px+solid+red;
++overflow:+scroll;
++direction:+rtl;++/*+<--+the+trick+*/
}

.box::before{+content:'';+display:block;+width:400%25;+height:1px;+}|1004390|<div+class='box'></div>
<br>
<input+placeholder='scrollLeft+value'>|1004391|1004392|FiddleDemo|1004393|使用http://css-tricks.com/almanac/properties/d/direction/方向可能会很有用|1004394|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/direction|1|http://jsfiddle.net/4d9C5/|2|http://css-tricks.com/almanac/properties/d/direction/^0|7|D|7|D|0|0|0|0|0|0|0|0|A|1|0|2|1H|2|0^^$0|@$1|2|3|4|5|6|7|17|8|@$9|18|A|19|B|C]]|D|@$9|1A|A|1B|1|1C]]|E|$]]|$1|F|3|G|5|6|7|1D|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1E|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|1F|8|@]|D|@]|E|$K|L]]|$1|O|3|P|5|J|7|1G|8|@]|D|@]|E|$K|L]]|$1|Q|3|G|5|6|7|1H|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|1I|8|@]|D|@$9|1J|A|1K|1|1L]]|E|$]]|$1|T|3|U|5|6|7|1M|8|@]|D|@$9|1N|A|1O|1|1P]]|E|$]]|$1|V|3|-4|5|6|7|1Q|8|@]|D|@]|E|$]]]|W|$X|$5|Y|Z|10|E|$11|12]]|13|$5|Y|Z|10|E|$11|14]]|15|$5|Y|Z|10|E|$11|16]]]]

<h3>You can of course use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/direction" rel="noreferrer"><code>direction:rtl</code></a></h3>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>document.querySelector('input').addEventListener('input', function(){
  document.querySelector('.box').scrollLeft = this.value;
})</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.box{
  width: 320px;
  height: 100px;
  border:1px solid red;
  overflow: scroll;
  direction: rtl;  /* &lt;-- the trick */
}

.box::before{ content:''; display:block; width:400%; height:1px; }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='box'&gt;&lt;/div&gt;
&lt;br&gt;
&lt;input placeholder='scrollLeft value'&gt;</code></pre>
</div>
</div>
</p>

<p><a href="http://jsfiddle.net/4d9C5/" rel="noreferrer"><strong>FiddleDemo</strong></a></p>

<p>This may be useful using direction <a href="http://css-tricks.com/almanac/properties/d/direction/" rel="noreferrer">http://css-tricks.com/almanac/properties/d/direction/</a></p>


blocks|key|677783|text|您可以使用一行jQuery来完成这一任务：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|677784|$("#box").scrollLeft(480);|offset|length|style|CODE|677785|entityMap^0|0|0|Q|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

<p>You can do this with one line of jQuery:</p>

<p><code>$("#box").scrollLeft(480);</code></p>


blocks|key|1004900|text|我一直在做一个项目，我做得很好，就像这样：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1004901|overflow-x:+scroll;+++
overflow-y:+hidden;+++
white-space:+nowrap;|code-block|syntax|javascript|1004902|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I've been working in a project and for me works very well like this:</p>

<pre><code>overflow-x: scroll;   
overflow-y: hidden;   
white-space: nowrap;
</code></pre>


blocks|key|677837|text|如果在顶部答案的文本末尾添加结束括号，则会出现意外行为。(在Chrome+54中测试)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|677838|<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>|code-block|syntax|javascript|677839|观察这个反馈结果：http://jsfiddle.net/mm37pqxa/|offset|length|677840|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/mm37pqxa/^0|0|0|9|T|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>There is an unexpected behavior if you add closing parenthesis at the end of text for the top answer. (Tested in Chrome 54)</p>

<pre><code>&lt;div id="box"&gt;
    &lt;div id="inner_box"&gt;
        &lt;div class="item" style="background:red;"&gt;&lt;/div&gt;
        &lt;div class="item" style="background:green;"&gt;&lt;/div&gt;
        &lt;div class="item" style="background:blue;"&gt;te(st)&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Watch this feedle for result : <a href="http://jsfiddle.net/mm37pqxa/" rel="nofollow noreferrer">http://jsfiddle.net/mm37pqxa/</a></p>


blocks|key|677848|text|使用方向rtl|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|677849|overflow:+auto;+
direction:rtl;+|code-block|syntax|javascript|677850|entityMap^0|0|7|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p><strong>Use direction rtl</strong></p>
<pre><code>overflow: auto; 
direction:rtl; 
</code></pre>


<p>So I am wondering if there is a possibility to have a different starting position with the <code>overflow:scroll</code> value;</p>
<p>When you start scrolling in a <code>div</code> the default behaviour is to scroll from left to right:</p>
<pre><code>|&lt;--Scrollbar-Starting-Left--&gt;_________________________________________________|
</code></pre>
<p>would it possible that it starts at the right?</p>
<pre><code>|_________________________________________________&lt;--Scrollbar-Starting-Right--&gt;|
</code></pre>
<p><a href="http://jsfiddle.net/marczking/HyRTx/" rel="nofollow noreferrer">In my example</a> the <code>red</code> and <code>green</code> items are first visible, I'd like the <code>green</code> and <code>blue</code> item to be visible first :)</p>
<p>I've tried <code>direction:rtl;</code> but no luck</p>


Scroll horizontally starting from right to left with CSS overflow:scroll

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

因此，我想知道是否有可能有一个不同的起点立场与overflow:scroll值；在div中开始滚动时，默认行为是从左向右滚动：|<--Scrollbar-Starting-Left-->_________________________________________________|它有可能从右边开始吗？|_____...

问水平滚动，从右到左，CSS溢出:滚动
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问水平滚动，从右到左，CSS溢出:滚动EN