指定した要素を左側にスクロールさせる/スクロールした値を取得するには scrollLeft プロパティを使用します。

scrollLeft：取得する場合の書き方

取得する要素.scrollLeft;

scrollLeft：変更する場合の書き方

変更する要素.scrollLeft = 変更する数理;

例1：#element が左にスクロールされている値をクリック（#sc_btn をクリック）して取得して表示する（#text へ表示）。

css で親の #example 要素よりも子の p 要素が横幅が大きく指定されていいます。overflow: auto; が #example には指定されている為横にスクロールできるようになっています。

HTML

<div id="example">
    <p>スクロールしてボタンをクリック→</p>
</div>
<button id="sc_btn">左へスクロールした値を取得します→</button>
<p id="text">0</p>

CSS

#example{
	width: 500px;
	height:100px;
	padding: 10px;
	background: #eee;
	border: solid 1px #666;
	overflow: auto;
}
p{
	width: 1000px;
	margin: 0;
	padding: 0;
}

JavaScript

ボタン #sc_btn をクリックすると#example が左に何pxスクロールされたかを #text へ表示します。

window.onload = init;
function init(){

var element = document.getElementById('example');
var btn = document.getElementById('sc_btn');
var text = document.getElementById('text');

    btn.onclick = function(){
        var elementLeft = element.scrollLeft;
        text.innerHTML = elementLeft;
    };
};  

サンプル

下のグレーのボックス #example の下にでているスクロールバーを左に動かし、ボタンをクリックしてみて下さい。現在のスクロールされている値が表示されます。

例2：#element の下のボタンをクリックして左に 50px ずつスクロールさせる。

css で親の #example 要素よりも子の p 要素が横幅が大きく指定されていいます。overflow: auto; が #example には指定されている為横にスクロールできるようになっています。

HTML

<div id="example">
    <p>スクロールしてボタンをクリック→</p>
</div>
<button id="sc_btn">ボタンをクリックで左へスクロールします→</button>

CSS

#example{
	width: 500px;
	height:100px;
	padding: 10px;
	background: #eee;
	border: solid 1px #666;
	overflow: auto;
}
p{
	width: 1000px;
	margin: 0;
	padding: 0;
}

JavaScript

ボタン #sc_btn をクリックすると #example のスクロール移動値が 50px ずつ足されて移動します。

window.onload = init;
function init(){

var element = document.getElementById('example');
var btn = document.getElementById('sc_btn');

    btn.onclick = function(){
        element.scrollLeft += 50;
    };
    
};   

サンプル

下のグレーのボックス #example 下のボタンをクリックすると左へ50pxずつスクロールします。