简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > H5 チュートリアル > 本文

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

黄舟
リリース： 2017-11-07 09:50:42
オリジナル
12271 人が閲覧しました

例

要素がスクロールされたときに実行されます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:js;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 サイトの他の関連記事を参照してください。

    関連ラベル：
    h5 html5 引き金
    ソース：php.cn
    前の記事：HTML5でマウスホイールがスクロールされているときに実行されるスクリプトのイベントonmousewheel 次の記事：ユーザーが HTML5 でビデオ/オーディオの再生を開始できるときにトリガーされる oncanplay イベント
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    著者別の最新記事
    最新の問題
    ページのメインディスプレイに画像を表示するにはどうすればよいですか? 私がやりたいのは、NASAAPI を使用して写真を受信することです。これらの写真は、マイページのサムネイルとメインディスプレイに表示されます。コードがサムネイルから画像を取得してペ...
    から 2024-04-06 15:33:12
    0
    1
    433
    PDF ファイルは HTML5 と JavaScript を実行できますか? PDF に埋め込まれるため、どのコンピュータでもブロックされないプログラムを作成してみようという愚かな考えがあります (JavaScript は PDF 内で実行できると聞きました...
    から 2024-04-05 12:57:00
    0
    1
    456
    HTML5 の enctype と formenctype の違いは何ですか? HTMLLivingStandard (別名、新しい HTML5 仕様) の属性 enctype と formenctype の違いは何でしょうか?私は HTML Standard...
    から 2024-04-02 11:47:56
    0
    1
    275
    ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
    から 2024-04-01 20:42:38
    0
    1
    259
    関連トピック
    詳細>
    人気のおすすめ
    人気のチュートリアル
    詳細>
    関連するチュートリアル
    人気のおすすめ
    最新のコース
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート
    私たちについて 免責事項 Sitemap
    PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！