html5에서 요소 스크롤 막대가 스크롤될 때 트리거되는 onscroll 이벤트

黄舟
풀어 주다: 2017-11-07 09:50:42
원래의
12272명이 탐색했습니다.

Example

요소가 스크롤될 때 실행됩니다. JavaScript
<div onscroll="myFunction()">
로그인 후 복사

정의 및 사용법

onscroll 이벤트는 요소 스크롤 막대가 스크롤될 때 발생합니다.

팁: 요소에 대한 스크롤 막대를 만들려면 CSS 오버플로 스타일 속성을 사용하세요.

브라우저 지원

html5에서 요소 스크롤 막대가 스크롤될 때 트리거되는 onscroll 이벤트

Syntax

HTML:

<element onscroll="myScript">
로그인 후 복사

JavaScript:

object.onscroll=function(){myScript};
로그인 후 복사

JavaScript, addEventListener() 메서드 사용:

object.addEventListener("scroll", myScript);
로그인 후 복사

참고: Internet Explorer 8 및 이전 IE 버전은 addEventListener() 메서드를 지원하지 않습니다.

기술 세부정보

기술 세부정보

버블링 지원 여부:
취소 가능 여부:NO
이벤트 유형:이벤트
지원되는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

      관련 라벨:
      원천:php.cn
      본 웹사이트의 성명
      본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
      인기 튜토리얼
      더>
      최신 다운로드
      더>
      웹 효과
      웹사이트 소스 코드
      웹사이트 자료
      프론트엔드 템플릿
      회사 소개 부인 성명 Sitemap
      PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!