プラグインなしで水平スクロールバーの位置を制御

Question

私はあなたの助けが必要です。おそらくヒントで十分でしょう。私が見ていないもの...

私は、水平スクロールバー（クラススクロール）を動的にscrollLeftにして、クラスrightでdivの可視部分の先頭にします。 css-partのコメントを見てください。

divの幅（クラス：左右）は後で動的に変化します。 私は何とか右の部分の先頭にスクロールバーを配置する必要があります。

境界線は常に画面中央に配置されます。右の部分は、境界線から右に、左の部分は左に配置する必要があります。

どうすればいいですか？ 私はそれが説明するのは難しいことを知っています。問い合わせてください。

これは私のコードスニペットです。

<!-- HTML --> 
<div class="width100"> 
    <div class="scroll"> 
     <div class="outer"> 
      <div class="border"></div> 
      <div class="left"></div> 
      <div class="right"></div> 
     </div> 
    </div> 
</div> 

-

<!-- CSS --> 
.width { 
    width:100%; 
} 
.scroll { 
    overflow-x: scroll; 
} 
.outer { 
    width: 960px; 
    height: 55px; 
    background-color: orange; 
} 
.border { 
    width: 2px; 
    height: 55px; 
    margin-left:50%; 
    position:absolute; 
    background-color:black; // will be background-image with width: 960px; 
} 
.left { 
    float: left; 
    width: 400px; //varies 
    height: 55px; 
    position:relative;  
} 
.right { 
    width:560px; //varies 
    float: left; 
    height: 55px; 
    background-color:green; // will be background-image with width: 960px; 
} 

-

<!-- Javascript --> 
$('.scroll').scrollLeft(/*to position?*/); 

Answer 1

scollLeftと呼ばれる要素のプロパティがあります。 要素のコンテンツが左にスクロールされるピクセル数を取得または設定します。あなたの特定の問題については

、あなたはjQueryを使って行きたい場合は、このスニペットはあなたを助けるかもしれないが：

$('.scroll')[0].scrollLeft = $('.left').width() 

ここjsFiddle exampleです。