SYNCER

SYNCER

Element.scrollIntoView() - 要素が見える位置までスクロールする

公開日:

Element.scrollIntoView()は、Elementのメソッドです。要素が見える位置までスクロールします。

概要

IDL

void scrollIntoView();
void scrollIntoView((boolean or ScrollIntoViewOptions) arg);

dictionary ScrollIntoViewOptions : ScrollOptions {
  ScrollLogicalPosition block = "center";
  ScrollLogicalPosition inline = "center";
};

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

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

enum ScrollLogicalPosition { "start", "center", "end", "nearest" };

引数

第1引数: arg

(boolean or ScrollIntoViewOptions) arg

真偽値、またはオブジェクトで、オプションを指定します。省略した場合はtrueが適用されます。真偽値の場合、下記の2通りです。

true
画面の上端と要素の上端が重なる位置までスクロールします。
false
画面の下端と要素の下端が重なる位置までスクロールします。

オブジェクトの場合、下記のプロパティを指定できます。2017年3月現在、まだサポートするブラウザが少ないので非推奨です。

behavior
初期値は"auto"。スクロールのアニメーションを表す文字列を指定する。
"auto"
ブラウザに任せる。
"instant"
アニメーションなし。
"smooth"
スムーズスクロール。
block
初期値は"center"。ブロックフロー方向(通常は垂直方向)のスクロール位置を表す文字列を指定する。
"start"
画面の上端と要素の上端が重なる位置までスクロールします。
"center"
要素が画面の上下の中央になる位置までスクロールします。
"end"
画面の下端と要素の下端が重なる位置までスクロールします。
"nearest"
"start"か"end"の、どちらが近い方が選択されます。
inline
初期値は"center"。インラインベースフロー方向(通常は水平方向)のスクロール位置を表す文字列を指定する。
"start"
画面の左端と要素の左端が重なる位置までスクロールします。
"center"
要素が画面の左右の中央になる位置までスクロールします。
"end"
画面の右端と要素の右端が重なる位置までスクロールします。
"nearest"
"start"か"end"の、どちらが近い方が選択されます。

返り値

void

返り値はありません。

脚注

:

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

boolean

真偽値(trueかfalse)。

dictionary

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

enum

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

void

undefinedが返ることを表す。

仕様書

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

説明

scrollIntoView()は、要素が見える位置までスクロールするメソッドです。上端と下端、どちらを揃えるかを指定できます。

HTML

<p id="hoge">SYNCER</p>

JavaScript

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

// メソッドを実行
element.scrollIntoView( true ) ;	// 画面の上端と要素の上端が重なる位置までスクロール
element.scrollIntoView( false ) ;	// 画面の下端と要素の下端が重なる位置までスクロール

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】Element.scrollIntoView() - 要素が見える位置までスクロールする</title>
		<link rel="canonical" href="https://syncer.jp/Web/API_Interface/Reference/IDL/Element/scrollIntoView/">
		<meta content="width=device-width,initial-scale=1.0" name="viewport">
		<style>
			body {
				width: 4200px ;
				background-color: #fff ;
			}

			div#hoge {
				background-color: #D36015 ;
				width: 200px ;
				height: 200px ;
				margin: 2000px ;
			}

			button#run {
				position: fixed ;
				right: 24px ;
				bottom: 24px ;
			}
		</style>
	</head>
	<body>

<p>デモは、新しいウィンドウで開いてお試し下さい。ボタンは画面の右下にあります。</p>

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

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

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

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

	</body>
</html>

デモを開く

デモ

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

<body> <div id="___body">

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

<style>

</style>

<script>

</script>

サポート状況

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

ブラウザサポート状況ブラウザサポート状況
ChromeSupportedFirefoxSupported
EdgeSupportedInternet ExplorerSupported
SafariSupportedOperaSupported
iOS SafariSupportedAndroidSupported

Chrome

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

Edge

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

Internet Explorer

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

Safari

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

Opera

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

iOS Safari

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

Android

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