jsブラウザ操作ツールの機能とメソッドの説明（上下の指定要素までスクロール、全画面表示と終了、表示されているウィンドウの幅と高さを取得）

1. ページの一番上までスクロールします

1. 機能コード

  const scrollToTop = () => {
      const height = document.documentElement.scrollTop || document.body.scrollTop;
      if (height > 0) {
          window.requestAnimationFrame(scrollToTop)
          window.scrollTo({
              top:0,
              behavior:"smooth"
          });
      }
  };

2. コードの説明

Element.scrollTop: 要素のコンテンツが垂直にスクロールするピクセル数を取得または設定できます。

window.scrollTo(): ドキュメント内の特定の座標までスクロールします

window.scrollTo(x-coord,y-coord )
// x-coord 是文档中的横轴坐标
// y-coord 是文档中的纵轴坐标

window.scrollTo(options)
/**
 * options 包含三个属性的对象：
 *  top 等同于 y-coord
 *  left 等同于 x-coord
 *  behavior 类型 String，表示滚动行为，支持参数:
 *    smooth(平滑滚动)
 *    instant(瞬间滚动)
 */

window.requestAnimationFrame(): ブラウザにアニメーションを実行したいことを伝え、次の再描画の前に指定された関数を呼び出してアニメーションを更新するようにブラウザに依頼します。以前に実行されました。利点: 関数の実行タイミングはシステムによって決定されます。リフレッシュ周波数は 60Hz で、置換機能は各リフレッシュ間隔で 1 回実行されるため、フレーム損失やフリーズは発生しません。

2. ページの一番下までスクロールします

 const scrollToBottom = () => {
  window.scrollTo(0, document.documentElement.clientHeight);
};

3. 指定した要素エリアまでスクロールします。

1. 機能コード

 const smoothScroll = (element) => {
  document.querySelector(element).scrollIntoView({
    behavior: "smooth",
  });
};

2. コードの説明

Element.scrollIntoView(): 要素の親コンテナをスクロールし、scrollIntoView() という要素がユーザーに見えるようにします。

element.scrollIntoView(); // 等同于 element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean 型参数
element.scrollIntoView(scrollIntoViewOptions); // Object 型参数

パラメータの説明
alignToTop: ブール型パラメータ

① 「はい」の場合true、要素の上部は、以下に対応して、要素が配置されているスクロール領域の表示領域の上部と位置合わせされます。

 scrollIntoViewOptions: {block: "start", inline: "nearest"}

② の場合false、要素の下部は、それが配置されているスクロール領域の表示領域の下部に位置合わせされます。これは、以下に対応します。

scrollIntoViewOptions: {block: "end", inline: "nearest"}

scrollIntoViewOptions: オブジェクトタイプパラメータ

①behavior: アニメーショントランジションエフェクト、 "auto"または "smooth" そのいずれかを定義します。デフォルトはです "auto"。

②ブロック: 垂直方向の配置、 "start"、 "center"、のいずれ"end"かを定義します"nearest"。デフォルトはです "start"。

③inline: 水平方向の配置、 "start"、 "center"、のいずれ"end"かを定義します"nearest"。デフォルトは "nearest"

4. 表示されているウィンドウの幅を取得する

1. 機能コード

const getPageViewWidth = () => {
  return (
    //document.compatMode 表明当前文档的渲染模式是怪异模式/混杂模式还是标准模式。
    document.compatMode == "BackCompat"
      ? document.body
      : document.documentElement
  ).clientWidth;
};

2. コードの説明

document.compatMode() には 2 つの値があります。

"BackCompat": quirks モード/promiscuous モードのドキュメント。

"CSS1Compat": ドキュメントは互換モードではありません。つまり、ドキュメントは標準モードまたは準標準モードです。

Element.clientWidth と Element.chientHeight の値を図に示します。

5. 表示されているウィンドウの高さを取得します

const getClientHeight = () => {
  let clientHeight = 0;
  if (document.body.clientHeight && document.documentElement.clientHeight) {
    clientHeight =
      document.body.clientHeight < document.documentElement.clientHeight
        ? document.body.clientHeight
        : document.documentElement.clientHeight;
  } else {
    clientHeight =
      document.body.clientHeight > document.documentElement.clientHeight
        ? document.body.clientHeight
        : document.documentElement.clientHeight;
  }
  return clientHeight;
};

6. ブラウザを全画面で開きます

const toFullScreen = () => {
  let element = document.documentElement;
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullScreen();
  }
};

7. ブラウザの全画面表示を終了します

 const exitFullscreen = () => {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
};