「JavaScript」window.scrollByで相対指定でページをスクロールする

2022年2月14日

構文
window.scrollBy(X方向への相対座標,YY方向への相対座標);
引数
x-coord は、左上に表示されたい文書の水平軸上のピクセルです。
y-coord は、左上に表示されたい文書の垂直軸上のピクセルです。
左方向/上方向は、マイナス値を指定します。
window.scrollBy() を使用して、相対指定でページをスクロールします。

使用例

<!DOCTYPE html>

<head>

<title>ウィンドウ内の文書をスクロールするサンプル</title>

</head>

</body>

</html>

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ウィンドウ内の文書をスクロールするサンプル</title> </head> <body style="width:1500px;"> <div style="height:800px;"></div>  <input type="button" value="y +150" onclick="window.scrollBy(0, 150);">  <input type="button" value="y -150" onclick="window.scrollBy(0, -150);">  <input type="button" value="x +150" onclick="window.scrollBy(150, 0);">  <input type="button" value="x -150" onclick="window.scrollBy(-150, 0);"> <div style="height:1000px;"></div> </body> </html>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ウィンドウ内の文書をスクロールするサンプル</title>
</head>
<body style="width:1500px;">
  <div style="height:800px;"></div>
  <!--上に150px スクロールする -->
  <input type="button" value="y +150" onclick="window.scrollBy(0, 150);">
   <!--下に150px スクロールする -->
 <input type="button" value="y -150" onclick="window.scrollBy(0, -150);">
   <!--左に100px スクロールする -->
 <input type="button" value="x +150" onclick="window.scrollBy(150, 0);">
    <!--右に100px スクロールする -->
  <input type="button" value="x -150" onclick="window.scrollBy(-150, 0);">
  <div style="height:1000px;"></div>
</body>
</html>

結果
ボタンを押すと、上下左右に150px スクロールします。

JavaScript

Posted by arkgame

関連投稿: