全画面スクロールの JavaScript ネイティブ実装の例-jsチュートリアル-php.cn

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

黄舟

リリース： 2017-09-22 09:46:25

オリジナル

1187 人が閲覧しました

この記事では主にネイティブ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 サイトの他の関連記事を参照してください。