コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ ウェブフロントエンド H5 チュートリアル HTML5で要素のスクロールバーがスクロールしているときにトリガーされるイベントonscroll

HTML5で要素のスクロールバーがスクロールしているときにトリガーされるイベントonscroll

黄舟
黄舟
Nov 07, 2017 am 09:50 AM
h5 html5 引き金

例

要素がスクロールされたときに実行されますJavaScript
<div onscroll="myFunction()">
ログイン後にコピー

定義と使用法

onscrollイベントは、要素のスクロールバーがスクロールしているときにトリガーされます。

ヒント: 要素のスクロール バーを作成するには、CSS オーバーフロー スタイル プロパティを使用します。

ブラウザのサポート

HTML5で要素のスクロールバーがスクロールしているときにトリガーされるイベントonscroll

構文

HTML:

<element onscroll="myScript">
ログイン後にコピー

JavaScript:

object.onscroll=function(){myScript};
ログイン後にコピー

JavaScript、addEventListener()メソッドを使用します:

object.addEventListener("scroll", myScript);
ログイン後にコピー

注: Internet Explorer 8およびそれ以前のIEバージョンは、addEventListener()メソッドをサポートしていません。

技術的な詳細

技術的な詳細

バブリングがサポートされているかどうか:はい
キャンセル可能:いいえ
イベントタイプ:イベント
サポートされている HTML タグ:
、
、、
、
、
、、
、
、
;、<フィールドセット>、<フォーム>、

、、
  • 、<メニュー>、
      、< ;、
      、<select>、<tbody>、<textarea>、<tfoot>、<thead>、<ul></td></tr></tbody></table><p style="margin: 10px 0px; padding: 0px; font-size: 16px; line-height: 1.5; color: rgb(51, 51, 51); font-family: Verdana, Arial, Helvetica, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">onscroll事件失效</p><pre class='brush:php;toolbar:false;'><!DOCTYPE html>
<html>
<head>
    　　<meta charset="utf-8">
</head>
<body onscroll="checkscroll()">
    　　<div class="father" >
        　　　　<div class="son">我是移动块</div>
    　　</div>
</body>
</html>
<style type="text/css">
html,
body {
    　　width: 100%;
    　　height: 100%;
    　　/*overflow-x:hidden;*/
    　　/*overflow: scroll;*/
}
.father {
    　　width: 100%;
    　　height: 100%;
    　　box-sizing: border-box;
}
.son {　　
　　height: 3000px;
    　　background-color: yellow;
    　　width: 100%;
    　　font-size: 80px;
    　　display: flex;
    　　justify-content: center;
    　　align-items: center;
}
</style>
<script type="text/javascript">
　　function checkscroll() {　　
    　　　　console.info(window.scrollY)
　　}
</script>
      ログイン後にコピー

      大家可以将这段代码copy亲自测试一下，在有和没有overflow属性之间切换，就明白了。

      因为很多同学在开发项目时，会有脚手架之类的文件进行快速开发，但是有的脚手架会在入口的html文件，设置overflow: scroll／auto。

      这个属性在入口级别的文件中最好不要随意使用，造成的scroll滑动监听整体失效，你无论如何也不会想到是这个原因。

      打个比方：

      APP.vue

      HTML5で要素のスクロールバーがスクロールしているときにトリガーされるイベントonscroll

      这是用vue.js写的页面，我在其中用了vux（一个基于vuejs的移动组件库）的一个组件view-box,当时我找遍了所有的文件，并没有那里

      有over-flow 样式；但是scroll事件失效，window.scrollY一直为0， 最后我发现所有页面都是如此，于是我就定位在入口的几个文件，将

      相关的引入组件也进行排查，终于在view-box,这个组建里找到了over-flow：auto；样式。注释掉后，就正常了

      所以说：over-flow：auto；如果放在入口文件并且放在包裹的父元素上，一定要慎重！

    • 以上がHTML5で要素のスクロールバーがスクロールしているときにトリガーされるイベントonscrollの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

    ホットAIツール

    Undresser.AI Undress

    Undresser.AI Undress

    リアルなヌード写真を作成する AI 搭載アプリ

    AI Clothes Remover

    AI Clothes Remover

    写真から衣服を削除するオンライン AI ツール。

    Undress AI Tool

    Undress AI Tool

    脱衣画像を無料で

    Clothoff.io

    Clothoff.io

    AI衣類リムーバー

    AI Hentai Generator

    AI Hentai Generator

    AIヘンタイを無料で生成します。

    もっと見る

    人気の記事

    R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
    1 か月前 By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O.最高のグラフィック設定
    1 か月前 By 尊渡假赌尊渡假赌尊渡假赌
    アサシンのクリードシャドウズ：シーシェルリドルソリューション
    3週間前 By DDD
    Windows11 KB5054979の新しいものと更新の問題を修正する方法
    2週間前 By DDD
    Will R.E.P.O.クロスプレイがありますか？
    1 か月前 By 尊渡假赌尊渡假赌尊渡假赌
    もっと見る

    ホットツール

    メモ帳++7.3.1

    メモ帳++7.3.1

    使いやすく無料のコードエディター

    SublimeText3 中国語版

    SublimeText3 中国語版

    中国語版、とても使いやすい

    ゼンドスタジオ 13.0.1

    ゼンドスタジオ 13.0.1

    強力な PHP 統合開発環境

    ドリームウィーバー CS6

    ドリームウィーバー CS6

    ビジュアル Web 開発ツール

    SublimeText3 Mac版

    SublimeText3 Mac版

    神レベルのコード編集ソフト（SublimeText3）

    もっと見る

    ホットトピック

    Gmailメールのログイン入り口はどこですか？
    7549
    15
    CakePHP チュートリアル
    1382
    52
    Steamのアカウント名の形式は何ですか
    83
    11
    Win11 Activation Key Permanent
    58
    19
    NYTの接続はヒントと回答です
    22
    90
    もっと見る
    Related knowledge
    HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

    HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

    HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

    HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

    HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

    これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

    HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

    HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

    HTML入力プレースホルダー HTML入力プレースホルダー Sep 04, 2024 pm 04:54 PM

    HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。

    HTML 順序付きリスト HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

    HTML 順序付きリストのガイド。ここでは、HTML 順序付きリストと型の導入とその例についても説明します。

    HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

    HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

    HTML の onclick ボタン HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

    HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。

    See all articles