Window.scrollBy() - 相対指定でスクロールする

2017/10/18

scrollBy()は、Windowのメソッドです。相対位置を指定してスクロールします。

概要

名前

scrollBy

所属

IDL

void scrollBy(optional ScrollToOptions options);
void scrollBy(unrestricted double x, unrestricted double y);

dictionary ScrollToOptions : ScrollOptions {
    unrestricted double left;
    unrestricted double top;
};

dictionary ScrollOptions {
    ScrollBehavior behavior = "auto";
};

enum ScrollBehavior { "auto", "instant", "smooth" };

仕様書

https://drafts.csswg.org/cssom-view/#dom-window-scrollby

説明

位置を指定する場合、現在のスクロール位置からの距離をピクセル単位で指定します。正の数で左下、負の数で右上の方向に進みます。

引数を2つ指定する場合は、第1引数(x)に水平方向の移動距離、第2引数(y)に垂直方向の移動距離を指定します。

引数を1つ指定する場合は、オプションとなるオブジェクト(options object)を指定します。下記のキーを指定できる。オブジェクトに対応しているブラウザは、サポート状況をご参考下さい。

left

水平方向の移動距離。

top

垂直方向の移動距離。

behavior

スクロール方法を下記のリストの中から文字列で指定する。

"auto": デフォルトの挙動。"instant"と同じ。
"instant": 目的の位置まで瞬間的に移動する。
"smooth": 目的の位置までスムーズスクロールする。

チュートリアル

基本的に水平方向の位置と、垂直方向の位置を指定します。下記は現在のスクロール位置から右方向に100px、下方向に50pxスクロールする例です。

scrollBy( 100, 50 ) ;

オブジェクトでオプションを指定できます。下記は同じ結果になります。

scrollBy( 100, 50 ) ;

scrollBy( {
	left: 100,
	top: 50, 
} ) ;

スムーズスクロールにするには、behaviorに"smooth"を指定して下さい。

scrollBy( {
	left: 100,
	top: 50,
	behavior: "smooth" ,
} ) ;

デモ

Window.scrollBy()のデモです。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
body { word-break: break-all ; background-image: linear-gradient(45deg,#eee 25%,transparent 0,transparent 75%,#eee 0),linear-gradient(45deg,#eee 25%,transparent 0,transparent 75%,#eee 0) ; background-size: 20px 20px ; background-position: 0 0,10px 10px ; }
div#result { white-space: pre-wrap ; position: fixed ; top: 12px ; left: 50% ; width: 200px ; margin-left: -100px ; }
div#dummy-x { width: 9999px ; height: 1px ; }
div#dummy-y { width: 1px ; height: 9999px ; }
div#buttons { position: fixed ; top: 150px ; overflow: hidden ; left: 50% ; width: 300px ; margin-left: -150px ; }
div#buttons p { float: left ; margin-top: 12px ; width: 300px ; text-align: center ; }
</style>
</head>
<body>
<div id="buttons">
	<p><button id="scroll1">絶対位置 scroll( x, y )</button> <button id="scroll2">絶対位置 scroll( options )</button></p>
	<p><button id="scrollTo1">絶対位置 scrollTo( x, y )</button> <button id="scrollTo2">絶対位置 scrollTo( options )</button></p>
	<p><button id="scrollBy1">相対位置 scrollBy( x, y )</button> <button id="scrollBy2">相対位置 scrollBy( options )</button></p>
</div>
<div id="result"></div>
<div id="dummy-x"></div>
<div id="dummy-y"></div>
<script>
var optionsObject = {
	top: 400 ,
	left: 400 ,
	behavior: "smooth" ,
} ;

addEventListener( "scroll", getInfo ) ;
getInfo() ;

document.getElementById( "scroll1" ).onclick = function () { scroll( 50, 50 ) ; }
document.getElementById( "scroll2" ).onclick = function () { scroll( optionsObject ) ; }
document.getElementById( "scrollTo1" ).onclick = function () { scrollTo( 50, 50 ) ; }
document.getElementById( "scrollTo2" ).onclick = function () { scrollTo( optionsObject ) ; }
document.getElementById( "scrollBy1" ).onclick = function () { scrollBy( 50, 50 ) ; }
document.getElementById( "scrollBy2" ).onclick = function () { scrollBy( optionsObject ) ; }

function getInfo () {
	document.getElementById( "result" ).textContent = "" ;

	appendText( "scrollX: " + scrollX + "\n" ) ;	
	appendText( "pageXOffset: " + pageXOffset + "\n" ) ;
	appendText( "scrollY: " + scrollY + "\n" ) ;	
	appendText( "pageYOffset: " + pageYOffset + "\n" ) ;
}

function appendText ( text ) {
	document.getElementById( "result" ).appendChild( document.createTextNode( text ) ) ;
}
</script>
</body>
</html>

サポート状況

Features	Chrome	Firefox	Safari	Edge	IE	Opera	iOS Safari	Android
scrollBy()	●	●	●	●	●	●	●	●
options object	● 61+	● 36+	● 10+	×	×	● 48+	● 10.0+	×
left	● 61+	● 36+	● 10+	×	×	● 48+	● 10.0+	×
top	● 61+	● 36+	● 10+	×	×	● 48+	● 10.0+	×
behavior	● 61+	● 36+	×	×	×	● 48+	×	×

概要

説明

チュートリアル

デモ

サポート状況

関連記事