search

Home  >  Article  >  Web Front-end  >  The event onscroll that is triggered when the element scroll bar is scrolling in html5

The event onscroll that is triggered when the element scroll bar is scrolling in html5

黄舟
黄舟Original
2017-11-07 09:50:4212288browse

Example

Executed when the element scrollsJavaScript
<div onscroll="myFunction()">

Definition and usage

onscroll event is executed when the element scroll bar is scrolling trigger.

Tip: Use the CSS overflow style property to create scroll bars for elements.

Browser support

The event onscroll that is triggered when the element scroll bar is scrolling in html5

Syntax

HTML:

<element onscroll="myScript">

JavaScript:

object.onscroll=function(){myScript};

JavaScript, use the addEventListener() method: 

object.addEventListener("scroll", myScript);

Note: Internet Explorer 8 and earlier IE versions do not support the addEventListener() method.

Technical Details

Technical Details

## Supported HTML tags:
,
, ,
Whether bubbling is supported: Yes
Can be canceled: NO
Event type: Event
,
,
, ,
,
,
,
,
,

-

, ,
  • , , ,
      ,

      , 

      , <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul><td width="938" valign="top" style="word-break: break-all;"></td></ul>
</thead>
</tfoot></textarea>
</tbody>
<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

      The event onscroll that is triggered when the element scroll bar is scrolling in html5

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

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

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

      所以说：over-flow：auto；如果放在入口文件并且放在包裹的父元素上，一定要慎重！

    • The above is the detailed content of The event onscroll that is triggered when the element scroll bar is scrolling in html5. For more information, please follow other related articles on the PHP Chinese website!

    Statement：
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Previous article：The event onmousewheel of the script that runs when the mouse wheel is being scrolled in html5Next article：The event onmousewheel of the script that runs when the mouse wheel is being scrolled in html5

    Related articles

    See more