首頁 web前端 H5教程 html5中在元素滾動條在滾動時觸發的事件onscroll

html5中在元素滾動條在滾動時觸發的事件onscroll

Nov 07, 2017 am 09:50 AM
h5 html5 觸發

實例

元素捲動時執行JavaScript
<div onscroll="myFunction()">
登入後複製

定義與用法

onscroll 事件在元素捲軸在捲動時觸發。

提示: 使用 CSS overflow 樣式屬性建立元素的捲軸。

瀏覽器支援

html5中在元素滾動條在滾動時觸發的事件onscroll

語法

HTML 中:

<element onscroll="myScript">
登入後複製

JavaScript 中:

object.onscroll=function(){myScript};
登入後複製

JavaScript 中, 使用addEventListener() 方法:

object.addEventListener("scroll", myScript);
登入後複製

注意: Internet Explorer 8 及更早IE 版本不支援 addEventListener() 方法。

Technical Details

技術細節

##YesYes是否可以取消:NO
#是否支援冒泡:
###事件類型:######Event####################支援的HTML 標籤:######
,
, , ,
,
, ,
,
, ,
,
, ,
,
,
,
,
,

-

, ,
  • , , ,
  • , , ,
  • , , ,
      ,

      ,

      , <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul>##### #######<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中文網其他相關文章!

      本網站聲明
      本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

      熱AI工具

      Undresser.AI Undress

      Undresser.AI Undress

      人工智慧驅動的應用程序,用於創建逼真的裸體照片

      AI Clothes Remover

      AI Clothes Remover

      用於從照片中去除衣服的線上人工智慧工具。

      Undress AI Tool

      Undress AI Tool

      免費脫衣圖片

      Clothoff.io

      Clothoff.io

      AI脫衣器

      Video Face Swap

      Video Face Swap

      使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

      熱工具

      記事本++7.3.1

      記事本++7.3.1

      好用且免費的程式碼編輯器

      SublimeText3漢化版

      SublimeText3漢化版

      中文版,非常好用

      禪工作室 13.0.1

      禪工作室 13.0.1

      強大的PHP整合開發環境

      Dreamweaver CS6

      Dreamweaver CS6

      視覺化網頁開發工具

      SublimeText3 Mac版

      SublimeText3 Mac版

      神級程式碼編輯軟體(SublimeText3)

      熱門話題

      Java教學
      1655
      14
      CakePHP 教程
      1413
      52
      Laravel 教程
      1306
      25
      PHP教程
      1252
      29
      C# 教程
      1226
      24
      HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

      HTML 表格邊框指南。在這裡,我們以 HTML 中的表格邊框為例,討論定義表格邊框的多種方法。

      HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

      這是 HTML 中巢狀表的指南。這裡我們討論如何在表中建立表格以及對應的範例。

      HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

      HTML 左邊距指南。在這裡,我們討論 HTML margin-left 的簡要概述及其範例及其程式碼實作。

      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 onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

      HTML onclick 按鈕指南。這裡我們分別討論它們的介紹、工作原理、範例以及各個事件中的onclick事件。

      在 HTML 中移動文字 在 HTML 中移動文字 Sep 04, 2024 pm 04:45 PM

      HTML 中的文字移動指南。在這裡我們討論一下marquee標籤如何使用語法和實作範例。

      See all articles