javascriptで要素のスクロールバーを制御する方法は？

Question

私はこのようなものが必要：

var obj=document.getElementById('s'); 
obj.scrollRight(200); 

HTML：

<div style="overflow-x=scroll;" id="s"> 
    Inline elements.. 
</div> 

重要な注意：私は 'scrollTopスプライト（0）' 関数があるけど、私があるかどうかを知る必要がありscrollRight（2）も！

Answer 1

obj.scrollRight(200);は機能ではありません。 javascriptでは、左からの水平スクロールしか設定できません。しかし、どちらも機能していません。

var obj = document.getElementById('s'); 
 
obj.scrollLeft = 200;

#s { 
 
    border: solid 3px orange; 
 
    width: 200px; 
 
    height: 200px; 
 
    overflow: scroll; 
 
    /* you could also use: */ 
 
    /* overflow-x: scroll; */ 
 
    /* overflow-y: scroll; */ 
 
} 
 

 
#s > div { 
 
    background-color:orange; 
 
    opacity: 0.5; 
 
    width: 1500px; 
 
    height: 1000px; 
 
}

<div id="s"> 
 
    <div> 
 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 
    </div> 
 
</div>

Answer 2

使用scrollLeft

scrollLeftがscrollRight IS：あなただけobj.scrollLeft = 200;は、例を参照してください設定しました。並べ替え

すべては、水平スクロール の量が設定されています。それをゼロに設定すると、それはすべての道になります が残っています。それを0より大きい値に設定すると、 が右に移動します！

Answer 3

scrollRightを繰り返し使用したい場合は、自分で構築してください。

HTML

<div class="container"> 
    <div class="big-element"></div> 
</div> 

CSS

.container { 
    border: 1px solid #666; 
    width: 1000px; 
    height: 400px; 
    overflow-x: scroll; 
    overflow-y: hidden; 
} 

.big-element { 
    width: 1500px; 
    height: 400px; 
    background: linear-gradient(to right, #AAA, #CCC); 
} 

const container = document.querySelector('.container'); 
const bigel = document.querySelector('.big-element'); 

function scrollRight(value) { 
    const available = bigel.offsetWidth - container.offsetWidth; 
    container.scrollLeft = available - value; 
} 

scrollRight(200); 

JSと：それはそれがどのように動作するかを計算するのは簡単ですhere's a pen for you to play with。

PS：それは本当にあなたが何かあれば、一部の人々はそれをやって好きではありませんが、あなたも、Elementプロトタイプにそれを構築することができ、より頻繁に使用したいです。