SYNCER

SYNCER

Element.scroll() - 絶対位置を指定して要素内スクロールをする

公開日:

Element.scroll()は、Elementのメソッドです。絶対位置を指定して、要素内スクロールを実行します。scrollToと同じです。

概要

IDL

void scroll(optional ScrollToOptions options);
void scroll(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" };

引数

第1引数: options (省略可)

optional ScrollToOptions options

スクロールの内容をオブジェクトで指定する。プロパティは下記の通り。引数を省略した場合、スクロールしません。

behavior
初期値は"auto"。スクロールのアニメーション。
"auto"
ブラウザに任せる。
"instant"
アニメーションなし。
"smooth"
スムーズスクロール。
left
水平方向の座標。要素のpadding-leftからの距離。
top
垂直方向の座標。要素のpadding-topからの距離。

第1引数: x

unrestricted double x

水平方向の座標。要素のpadding-leftからの距離。

第2引数: y

unrestricted double y

垂直方向の座標。要素のpadding-topからの距離。

返り値

void

返り値はありません。

脚注

:

左のインターフェイスが、右のインターフェイスを継承することを表します。

dictionary

指定できる値などの情報を定義しています。

enum

列挙型の値であることを表し、指定できる値を定義しています。

optional

引数が省略可能であることを表します。

unrestricted double

64bitの浮動小数点数。

void

undefinedが返ることを表す。

仕様書

https://drafts.csswg.org/cssom-view/#extension-to-the-element-interface

説明

scroll()は、絶対位置を指定して、要素内スクロールをするメソッドです。要素内にスクロールできる領域がないと意味がありません。

HTML

<div id="hoge">
	<!-- ...大きいコンテンツ... -->
</div>

CSS

div#hoge {
	width: 300px ;
	overflow: scroll ;	/* 表示領域を超えたらスクロール */
}

JavaScript

// 要素を取得
var element = document.getElementById( "hoge" ) ;	// <div id="hoge"> ... </div>

// メソッドを実行
element.scroll( 50, 30 ) ;	// 左から50px、上から30px離れた位置までスクロール

引数はオブジェクトでも指定できます。ただし、2017年3月現在、サポートしているブラウザは多くありません。

JavaScript

// メソッドを実行
element.scroll( {
	behavior: "smooth" ,	// スムーズスクロールにする
	left: 50 ,	// 左から50px離れた位置
	top: 30 ,	// 上から30px離れた位置
} ) ;

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】Element.scroll() - 絶対位置を指定して要素内スクロールをする</title>
		<link rel="canonical" href="https://syncer.jp/Web/API_Interface/Reference/IDL/Element/scroll/">
		<meta content="width=device-width,initial-scale=1.0" name="viewport">
		<style>
			body {
				background-color: #fff ;
			}

			div#hoge {
				overflow: scroll ;
				width: 300px ;
				height: 300px ;
				border: 1px solid #000 ;
			}

			div#fuga {
				width: 2000px ;
				height: 2000px ;

				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-position: 0 0, 10px 10px ;
				background-size: 20px 20px ;
			}
		</style>
	</head>
	<body>

<p><button id="run" type="button">メソッドを実行</button></p>

<div id="hoge">
	<div id="fuga"></div>
</div>

<script>
// 要素を取得
var element = document.getElementById( "hoge" ) ;

// ボタンのクリックイベント
document.getElementById( "run" ).onclick = function () {
	// メソッドを実行
	element.scroll( 100, 200 ) ;
}
</script>

	</body>
</html>

デモを開く

デモ

</head><body>までを含めて下さい。

<body> <div id="___body">

</div> <script>...</script> </body> </html>

<style>

</style>

<script>

</script>

サポート状況

Element.scroll()のサポート状況です。

ブラウザサポート状況ブラウザサポート状況
ChromeNot SupportedFirefoxSupported 36+
EdgeNot SupportedInternet ExplorerNot Supported
SafariNot SupportedOperaNot Supported
iOS SafariNot SupportedAndroidNot Supported

Chrome

バージョンサポート状況公開時期シェア
57Not Supported2017年3月頃0.1%
56Not Supported2017年1月頃12.02%
55Not Supported2016年12月頃12.36%
54Not Supported2016年10月頃0.44%
53Not Supported2016年9月頃0.25%
52Not Supported2016年7月頃0.27%
51Not Supported2016年6月頃0.4%
50Not Supported2016年4月頃0.32%
49Not Supported2016年3月頃0.47%
48Not Supported2016年1月頃0.02%
47Not Supported2015年12月頃0.06%
46Not Supported2015年10月頃0.56%
45Not Supported2015年9月頃0.01%
44Not Supported2015年7月頃0.83%
43Not Supported2015年5月頃0.05%
42Not Supported2015年4月頃0.05%
41Not Supported2015年3月頃0.01%
40Not Supported2015年1月頃0.59%
39Not Supported2014年11月頃0.02%
38Not Supported2014年10月頃0.08%
37Not Supported2014年8月頃0.01%
36Not Supported2014年7月頃0.01%
35Not Supported2014年5月頃0.01%
34Not Supported2014年4月頃0.14%
33Not Supported2014年2月頃0.01%
32Not Supported2014年1月頃0%
31Not Supported2013年11月頃0.01%
30Not Supported2013年10月頃0.03%
29Not Supported2013年8月頃0%
28Not Supported2013年6月頃0.03%
27Not Supported2013年5月頃0.01%
26Not Supported2013年3月頃0%
25Not Supported2013年2月頃0%
24Not Supported2013年1月頃0%
23Not Supported2012年11月頃0%
22Not Supported2012年9月頃0%
21Not Supported2012年7月頃0%
20Not Supported2012年6月頃0%
19Not Supported2012年5月頃0%
18Not Supported2012年3月頃0.01%
17Not Supported2012年2月頃0.01%
16Not Supported2011年12月頃0%
15Not Supported2011年10月頃0%
14Not Supported2011年9月頃0%

Firefox

バージョンサポート状況公開時期シェア
52Supported2017年3月頃0.12%
51Supported2017年1月頃1.7%
50Supported2016年11月頃0.78%
49Supported2016年9月頃0.02%
48Supported2016年8月頃0.07%
47Supported2016年6月頃0.03%
46Supported2016年4月頃0.01%
45Supported2016年3月頃0.1%
44Supported2016年1月頃0.01%
43Supported2015年12月頃0.02%
42Supported2015年11月頃0.01%
41Supported2015年9月頃0%
40Supported2015年8月頃0.02%
39Supported2015年7月頃0.01%
38Supported2015年5月頃0.02%
37Supported2015年3月頃0%
36Supported2015年2月頃0.01%
35Not Supported2015年1月頃0%
34Not Supported2014年12月頃0.01%
33Not Supported2014年10月頃0%
32Not Supported2014年9月頃0%
31Not Supported2014年7月頃0.01%
30Not Supported2014年6月頃0%
29Not Supported2014年4月頃0%
28Not Supported2014年3月頃0.01%
27Not Supported2014年2月頃0%
26Not Supported2013年12月頃0%
25Not Supported2013年10月頃0%
24Not Supported2013年9月頃0%
23Not Supported2013年8月頃0%
22Not Supported2013年6月頃0%
21Not Supported2013年5月頃0%
20Not Supported2013年4月頃0%
19Not Supported2013年2月頃0%
18Not Supported2013年1月頃0%
17Not Supported2012年11月頃0%
16Not Supported2012年10月頃0%
15Not Supported2012年8月頃0%
14Not Supported2012年7月頃0%
13Not Supported2012年6月頃0%
12Not Supported2012年4月頃0%
11Not Supported2012年3月頃0%
10Not Supported2012年1月頃0%
9Not Supported2011年12月頃0%
8Not Supported2011年11月頃0%
7Not Supported2011年9月頃0%
6Not Supported2011年8月頃0%
5Not Supported2011年6月頃0%
4Not Supported2011年3月頃0%

Edge

バージョンサポート状況公開時期シェア
14Not Supported2016年2月頃1.05%
13Not Supported2015年9月頃0.08%

Internet Explorer

バージョンサポート状況公開時期シェア
11Not Supported2013年10月頃4.99%
10Not Supported2012年8月頃0.09%
9Not Supported2011年3月頃0.18%
8Not Supported2009年3月頃0.04%
7Not Supported2006年10月頃0.01%
6Not Supported2001年8月頃0%

Safari

バージョンサポート状況公開時期シェア
10Not Supported2016年10月頃0%
9.1Not Supported2015年9月頃0%
8.0Not Supported2014年10月頃0%
7.1Not Supported2013年10月頃0%
6.0Not Supported2012年7月頃0%
5.1Not Supported2011年7月頃0%
4Not Supported2009年6月頃0%

Opera

バージョンサポート状況公開時期シェア
43Not Supported2017年2月頃0.06%
42Not Supported2016年12月頃0.09%
41Not Supported2016年10月頃0.01%
40Not Supported2016年9月頃0%
39Not Supported2016年8月頃0%
38Not Supported2016年6月頃0%
37Not Supported2016年5月頃0.01%
36Not Supported2016年3月頃0.01%
35Not Supported2016年2月頃0%
34Not Supported2015年12月頃0%
33Not Supported2015年10月頃0%
32Not Supported2015年9月頃0%
31Not Supported2015年8月頃0%
30Not Supported2015年6月頃0%
29Not Supported2015年4月頃0%
28Not Supported2015年3月頃0%
27Not Supported2015年1月頃0%
26Not Supported2014年12月頃0%
25Not Supported2014年10月頃0%
24Not Supported2014年9月頃0%
23Not Supported2014年7月頃0%
22Not Supported2014年6月頃0%
21Not Supported2014年5月頃0.01%
20Not Supported2014年3月頃0%
19Not Supported2014年1月頃0%
18Not Supported2013年11月頃0%
17Not Supported2013年10月頃0%
16Not Supported2013年8月頃0%
15Not Supported2013年7月頃0%
12Not Supported2012年6月頃0.02%
11.6Not Supported2011年12月頃0%
11.1Not Supported2011年4月頃0%

iOS Safari

バージョンサポート状況公開時期シェア
10.0Not Supported2016年9月頃39.65%
9.1Not Supported2015年9月頃5.39%
8.3Not Supported2014年9月頃1.03%
7.0Not Supported2013年9月頃0.24%
6.0Not Supported2012年9月頃0.05%
5.1Not Supported2011年10月頃0.03%

Android

バージョンサポート状況公開時期シェア
4.4Not Supported2013年10月頃0%
4.3Not Supported2013年7月頃0%
4.2Not Supported2013年3月頃0.03%
4.1Not Supported2012年12月頃0%
4.0Not Supported2012年6月頃1.61%
2.3Not Supported2011年10月頃0%