Maison interface Web Tutoriel H5 L'événement onscroll qui est déclenché lorsque la barre de défilement de l'élément défile en HTML5

L'événement onscroll qui est déclenché lorsque la barre de défilement de l'élément défile en HTML5

Nov 07, 2017 am 09:50 AM
h5 html5 déclenchement

Exemple

Exécuté lorsque l'élément défileJavaScript
<div onscroll="myFunction()">
Copier après la connexion

Définition et utilisation

événement onscroll lorsque l'élément défile la barre est en mode Fired lors du défilement.

Astuce : utilisez la propriété de style de débordement CSS pour créer des barres de défilement pour les éléments.

Prise en charge du navigateur

Lévénement onscroll qui est déclenché lorsque la barre de défilement de lélément défile en HTML5

Syntaxe

HTML :

<element onscroll="myScript">
Copier après la connexion

JavaScript :

object.onscroll=function(){myScript};
Copier après la connexion

En JavaScript, utilisez la méthode addEventListener() :

object.addEventListener("scroll", myScript);
Copier après la connexion

Remarque : Internet Explorer 8 et les versions antérieures d'IE ne prennent pas en charge la méthode addEventListener().

Détails techniques

Détails techniques

是否支持冒泡:Yes
是否可以取消:NO
事件类型:Event
支持的 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>
      Copier après la connexion

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

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

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

      打个比方:

      APP.vue

      Lévénement onscroll qui est déclenché lorsque la barre de défilement de lélément défile en HTML5

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

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

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

      所以说:over-flow:auto;如果放在入口文件并且放在包裹的父元素上,一定要慎重!

      Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

      Déclaration de ce site Web
      Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

      Outils d'IA chauds

      Undresser.AI Undress

      Undresser.AI Undress

      Application basée sur l'IA pour créer des photos de nu réalistes

      AI Clothes Remover

      AI Clothes Remover

      Outil d'IA en ligne pour supprimer les vêtements des photos.

      Undress AI Tool

      Undress AI Tool

      Images de déshabillage gratuites

      Clothoff.io

      Clothoff.io

      Dissolvant de vêtements AI

      AI Hentai Generator

      AI Hentai Generator

      Générez AI Hentai gratuitement.

      Article chaud

      R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
      1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
      R.E.P.O. Meilleurs paramètres graphiques
      1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
      Will R.E.P.O. Vous avez un jeu croisé?
      1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

      Outils chauds

      Bloc-notes++7.3.1

      Bloc-notes++7.3.1

      Éditeur de code facile à utiliser et gratuit

      SublimeText3 version chinoise

      SublimeText3 version chinoise

      Version chinoise, très simple à utiliser

      Envoyer Studio 13.0.1

      Envoyer Studio 13.0.1

      Puissant environnement de développement intégré PHP

      Dreamweaver CS6

      Dreamweaver CS6

      Outils de développement Web visuel

      SublimeText3 version Mac

      SublimeText3 version Mac

      Logiciel d'édition de code au niveau de Dieu (SublimeText3)

      Bordure de tableau en HTML Bordure de tableau en HTML Sep 04, 2024 pm 04:49 PM

      Guide de la bordure de tableau en HTML. Nous discutons ici de plusieurs façons de définir une bordure de tableau avec des exemples de bordure de tableau en HTML.

      Marge gauche HTML Marge gauche HTML Sep 04, 2024 pm 04:48 PM

      Guide de la marge HTML gauche. Nous discutons ici d'un bref aperçu de la marge gauche HTML et de ses exemples ainsi que de son implémentation de code.

      Tableau imbriqué en HTML Tableau imbriqué en HTML Sep 04, 2024 pm 04:49 PM

      Ceci est un guide des tableaux imbriqués en HTML. Nous discutons ici de la façon de créer un tableau dans le tableau ainsi que des exemples respectifs.

      Disposition du tableau HTML Disposition du tableau HTML Sep 04, 2024 pm 04:54 PM

      Guide de mise en page des tableaux HTML. Nous discutons ici des valeurs de la mise en page des tableaux HTML ainsi que des exemples et des résultats en détail.

      Espace réservé d'entrée HTML Espace réservé d'entrée HTML Sep 04, 2024 pm 04:54 PM

      Guide de l'espace réservé de saisie HTML. Nous discutons ici des exemples d'espace réservé d'entrée HTML ainsi que des codes et des sorties.

      Liste ordonnée HTML Liste ordonnée HTML Sep 04, 2024 pm 04:43 PM

      Guide de la liste ordonnée HTML. Ici, nous discutons également de l'introduction de la liste et des types HTML ordonnés ainsi que de leur exemple respectivement.

      Déplacer du texte en HTML Déplacer du texte en HTML Sep 04, 2024 pm 04:45 PM

      Guide pour déplacer du texte en HTML. Nous discutons ici d'une introduction, du fonctionnement des balises de sélection avec la syntaxe et des exemples à implémenter.

      Bouton HTML onclick Bouton HTML onclick Sep 04, 2024 pm 04:49 PM

      Guide du bouton HTML onclick. Nous discutons ici de leur introduction, de leur fonctionnement, des exemples et de l'événement onclick dans divers événements respectivement.

      See all articles