全画面スクロールの JavaScript ネイティブ実装の例

この記事では主にネイティブJavaScriptで実装された全画面スクロール機能を紹介しており、JavaScriptのイベント応答やページ要素属性の動的な操作に関する実装テクニックも紹介しています。必要な方は参考にしてください。

この記事の例では、ネイティブJavaScriptによる画面スクロール機能を実現。参考のために皆さんと共有してください。詳細は次のとおりです:

原則:

1. 現在のブラウザ画面の高さを計算し、ページをめくるたびに表示されるコンテンツの高さが画面の高さになります。

2. マウス ホイール イベントを実行する スクロール ホイール イベントに関するブラウザーの互換性の問題を聞いて注意してください。

これ以上ナンセンスはやめて、コードに直接行きましょう

htmlコード:

<p id="wrap">
  <p id="main" style="top: 0;">
    <p class="content num1">
      <img src="https://www.bing.com/az/hprichbg/rb/SingingRingingTree_ZH-CN12497946624_1920x1080.jpg" width="100%" height="100%">
    </p>
    <p class="content num2">
      <img src="https://www.bing.com/az/hprichbg/rb/ShenandoahNP_ZH-CN9981989975_1920x1080.jpg" width="100%" height="100%">
    </p>
    <p class="content num3">
      <img src="https://www.bing.com/az/hprichbg/rb/GareSaintLazare_ZH-CN6611772290_1920x1080.jpg" width="100%" height="100%">
    </p>
    <p class="content num4">
      <img src="https://www.bing.com/az/hprichbg/rb/FriendshipSquare_ZH-CN8820626148_1920x1080.jpg" width="100%" height="100%">
    </p>
  </p>
</p>

cssコード:

#wrap{overflow: hidden;width: 100%;}
#main{top: 0;position: relative;}
.content{width: 100%;margin: 0;height: 100%;}
.num1{background: #e8e8e8;}
.num2{background: pink;}
.num3{background: yellow;}
.num4{background: orange;}

jsコード:

りー

以上が全画面スクロールの JavaScript ネイティブ実装の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。