控制沒有插件的水平滾動條的位置

Question

我需要你的幫助。也許暗示就夠了。東西我還沒有看到...

我想要水平滾動條（類滾動）動態scrollLeft到類的權利的div的可見部分的開始。請看看CSS部分的評論。

divs（類：左/右）的寬度稍後動態變化。 所以我不知何故必須將滾動條定位到右側部分的開頭。

邊框始終位於屏幕中間。右邊的部分應該放在邊界的右邊，左邊的部分放在左邊。

你知道該怎麼做嗎？ 我知道這很難解釋。請問。

這是我的代碼片段。

<!-- 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。