Heim > Web-Frontend > H5-Tutorial > Hauptteil

Das Ereignis onscroll, das ausgelöst wird, wenn die Element-Bildlaufleiste in HTML5 scrollt

黄舟
Freigeben: 2017-11-07 09:50:42
Original
12272 Leute haben es durchsucht

Beispiel

Wird ausgeführt, wenn das Element scrolltJavaScript
<div onscroll="myFunction()">
Nach dem Login kopieren

Definition und Verwendung

onscroll-Ereignis, wenn das Element scrollt Die Leiste wird beim Scrollen ausgelöst.

Tipp: Verwenden Sie die CSS-Overflow-Style-Eigenschaft, um Bildlaufleisten für Elemente zu erstellen.

Browser unterstützt

Das Ereignis onscroll, das ausgelöst wird, wenn die Element-Bildlaufleiste in HTML5 scrollt

Syntax

HTML:

<element onscroll="myScript">
Nach dem Login kopieren

JavaScript:

object.onscroll=function(){myScript};
Nach dem Login kopieren

Verwenden Sie in JavaScript die Methode addEventListener():

object.addEventListener("scroll", myScript);
Nach dem Login kopieren

Hinweis: Internet Explorer 8 und frühere IE-Versionen unterstützen die Methode addEventListener() nicht.

Technische Details

Technische Details

是否支持冒泡: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: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>
      Nach dem Login kopieren

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

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

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

      打个比方:

      APP.vue

      Das Ereignis onscroll, das ausgelöst wird, wenn die Element-Bildlaufleiste in HTML5 scrollt

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

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

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

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

      Das obige ist der detaillierte Inhalt vonDas Ereignis onscroll, das ausgelöst wird, wenn die Element-Bildlaufleiste in HTML5 scrollt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

      Verwandte Etiketten:
      Quelle:php.cn
      Erklärung dieser Website
      Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
      Beliebte Tutorials
      Mehr>
      Neueste Downloads
      Mehr>
      Web-Effekte
      Quellcode der Website
      Website-Materialien
      Frontend-Vorlage
      Über uns Haftungsausschluss Sitemap
      Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!