どうも。
JavaScript で画面の高さを取得してその分だけスクロールする方法をメモしておきます。
HTML
以下のように高さ 100 px のボタンを「あああ」、「いいい」・・・「ととと」まで縦に 20 個並べます。
左のボタンが上にスクロール。右のボタンが下にスクロールします。
ご覧の通りブラウザ上には縦に 5 個分だけ表示されていて、右端にはスクロールバーが見えます。
HTML は以下のようになりました。
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="main.js"></script> <style> button { height: 100px; width: 200px; } </style> </head> <body> <div> <button onclick="scrollUp();">UP あああ</button> <button onclick="scrollDown();">Down あああ</button> </div> <div> <button onclick="scrollUp();">UP いいい</button> <button onclick="scrollDown();">Down いいい</button> </div> <div> <button onclick="scrollUp();">UP ううう</button> <button onclick="scrollDown();">Down ううう</button> </div> <div> <button onclick="scrollUp();">UP えええ</button> <button onclick="scrollDown();">Down えええ</button> </div> <div> <button onclick="scrollUp();">UP おおお</button> <button onclick="scrollDown();">Down おおお</button> </div> <div> <button onclick="scrollUp();">UP かかか</button> <button onclick="scrollDown();">Down かかか</button> </div> <div> <button onclick="scrollUp();">UP ききき</button> <button onclick="scrollDown();">Down ききき</button> </div> <div> <button onclick="scrollUp();">UP くくく</button> <button onclick="scrollDown();">Down くくく</button> </div> <div> <button onclick="scrollUp();">UP けけけ</button> <button onclick="scrollDown();">Down けけけ</button> </div> <div> <button onclick="scrollUp();">UP こここ</button> <button onclick="scrollDown();">Down こここ</button> </div> <div> <button onclick="scrollUp();">UP さささ</button> <button onclick="scrollDown();">Down さささ</button> </div> <div> <button onclick="scrollUp();">UP ししし</button> <button onclick="scrollDown();">Down ししし</button> </div> <div> <button onclick="scrollUp();">UP すすす</button> <button onclick="scrollDown();">Down すすす</button> </div> <div> <button onclick="scrollUp();">UP せせせ</button> <button onclick="scrollDown();">Down せせせ</button> </div> <div> <button onclick="scrollUp();">UP そそそ</button> <button onclick="scrollDown();">Down そそそ</button> </div> <div> <button onclick="scrollUp();">UP たたた</button> <button onclick="scrollDown();">Down たたた</button> </div> <div> <button onclick="scrollUp();">UP ちちち</button> <button onclick="scrollDown();">Down ちちち</button> </div> <div> <button onclick="scrollUp();">UP つつつ</button> <button onclick="scrollDown();">Down つつつ</button> </div> <div> <button onclick="scrollUp();">UP ててて</button> <button onclick="scrollDown();">Down ててて</button> </div> <div> <button onclick="scrollUp();">UP ととと</button> <button onclick="scrollDown();">Down ととと</button> </div> </body> </html>
script タグで main.js を読み込んでいます。
JavaScript
main.js の内容です。
function scrollUp() { window.scrollBy(0 , -document.documentElement.clientHeight); } function scrollDown() { window.scrollBy(0 , document.documentElement.clientHeight); }
document.documentElement.clientHeight を使用して画面の高さ(ツールバーやスクロールバー含まず)を取得し、window.scrollBy でスクロールを実行しています。
取得できる画面の幅や高さはいろいろあります。参考にさせていただいた記事です。
ウインドウサイズを取得する 【JavaScript 動的サンプル】
動かしてみる
次のように最初の 5 個が表示されている状態で「Down」ボタンのどれかを押します。
すると、 1 画面分だけ下にスクロールしました。
画面の高さを変えて試すと、スクロール幅が画面サイズに合わせて変わっていることが確認できます。
今日は、JavaScript を使ってブラウザの描画領域の高さ分だけスクロールする方法をメモしておきました。
縦長ページのスクリーンショットを自動で取得する場合に使えそうですね。
それでは。
初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発
- 作者: Ethan Brown,武舎広幸,武舎るみ
- 出版社/メーカー: オライリージャパン
- 発売日: 2017/01/20
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
ゲームで学ぶJavaScript入門 HTML5&CSSも身につく!
- 作者: 田中賢一郎
- 出版社/メーカー: インプレス
- 発売日: 2015/12/11
- メディア: Kindle版
- この商品を含むブログを見る