山崎屋の技術メモ

IT業界で働く中でテクノロジーを愛するSIerのシステムエンジニア👨‍💻 | AndroidとWebアプリの二刀流🧙‍♂️ | コードの裏にあるストーリーを綴るブログ執筆者✍️ | 日々進化するデジタル世界で学び続ける探究者🚀 | #TechLover #CodeArtisan、気になること、メモしておきたいことを書いていきます。

【JS】画面の高さ分スクロールする

どうも。

JavaScript で画面の高さを取得してその分だけスクロールする方法をメモしておきます。

HTML

以下のように高さ 100 px のボタンを「あああ」、「いいい」・・・「ととと」まで縦に 20 個並べます。

f:id:yyama1556:20191124131016p:plain

左のボタンが上にスクロール。右のボタンが下にスクロールします。

ご覧の通りブラウザ上には縦に 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」ボタンのどれかを押します。
f:id:yyama1556:20191124132631p:plain

すると、 1 画面分だけ下にスクロールしました。
f:id:yyama1556:20191124132827p:plain

画面の高さを変えて試すと、スクロール幅が画面サイズに合わせて変わっていることが確認できます。
 
 
今日は、JavaScript を使ってブラウザの描画領域の高さ分だけスクロールする方法をメモしておきました。

縦長ページのスクリーンショットを自動で取得する場合に使えそうですね。

それでは。

初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発

初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発

  • 作者: Ethan Brown,武舎広幸,武舎るみ
  • 出版社/メーカー: オライリージャパン
  • 発売日: 2017/01/20
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る
ゲームで学ぶJavaScript入門 HTML5&CSSも身につく!

ゲームで学ぶJavaScript入門 HTML5&CSSも身につく!