html5中在元素滚动条在滚动时触发的事件onscroll-

发布时间：08/01 来源：未知浏览：关键词：

onscroll事件在元素滚动条在滚动时触发。提醒：运用CSSoverflow样式属性来新建元素的滚动条。

实例

元素滚动时施行 JavaScript

定义和用途

onscroll 事件在元素滚动条在滚动时触发。

提醒：运用 CSS overflow 样式属性来新建元素的滚动条。

阅读器支撑

语法

HTML 中:

JavaScript 中:

object.onscroll=function(){myScript};

JavaScript 中, 运用 addEventListener() 办法:

object.addEventListener("scroll", myScript);

注意： Internet Explorer 8 及更早 IE 版本不支撑 addEventListener() 办法。

Technical Details

技术细节

, <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()">
    　　
        　　　　我是挪移块
    　　
</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》</pre><p>大家可以将这段代码copy亲自测试一下，在有和没有overflow属性之间切换，就明确了。</p><p>由于许多同窗在开发项目时，会有足手架之类的文件进行迅速开发，但是有的足手架会在入口的html文件，设定overflow: scroll／auto。</p><p>这个属性在入口级另外文件中最佳不要随便运用，造成的scroll滑动监听整体失效，你不管怎样也不会想到是这个缘由。</p><p>打个比如：</p><p>APP.vue</p><p></p><p>这是用vue.js写的页面，我在其中用了vux（一个基于vuejs的挪移组件库）的一个组件view-box,当时我寻遍了所有的文件，并没有那里</p><p>有over-flow 样式；但是scroll事件失效，window.scrollY不断为0， 最后我发明所有页面都是如此，于是我就定位在入口的几个文件，将</p><p>相干的引入组件也进行排查，终于在view-box,这个组建里寻到了over-flow：auto；样式。注释掉后，就正常了</p><p>所以说：over-flow：auto；要是放在入口文件而且放在包裹的父元素上，一定要稳重！<p>以上就是html5中在元素滚动条在滚动时触发的事件onscroll的细致内容，更多请关注 百分百源码网 其它相干文章！</p>

</div>
		   <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <script type="text/javascript" src="http://www.baidow.com/ds/js/jquery.min.js"></script>
    <title>打赏</title>
    <style type="text/css">
        .content{width:100%;margin:0px auto;}
                .hide_box{z-index:999;filter:alpha(opacity=50);background:#666;opacity: 0.5;-moz-opacity: 0.5;left:0;top:0;height:99%;width:100%;position:fixed;display:none;}
        .shang_box{width:540px;height:540px;padding:10px;background-color:#fff;border-radius:10px;position:fixed;z-index:1000;left:50%;top:50%;margin-left:-280px;margin-top:-280px;border:1px dotted #dedede;display:none;}
        .shang_box img{border:none;border-width:0;}
        .dashang{display:block;width:100px;margin:5px auto;height:25px;line-height:25px;padding:10px;background-color:#E74851;color:#fff;text-align:center;text-decoration:none;border-radius:10px;font-weight:bold;font-size:16px;transition: all 0.3s;}
        .dashang:hover{opacity:0.8;padding:15px;font-size:18px;}
        .shang_close{float:right;display:inline-block;}
                .shang_logo{display:block;text-align:center;margin:20px auto;}
        .shang_tit{width: 100%;height: 75px;text-align: center;line-height: 66px;color: #a3a3a3;font-size: 16px;background: url('http://www.baidow.com/ds/img/cy-reward-title-bg.jpg');font-family: 'Microsoft YaHei';margin-top: 7px;margin-right:2px;}
        .shang_tit p{color:#a3a3a3;text-align:center;font-size:16px;}
        .shang_payimg{width:140px;padding:10px;border:6px solid #EA5F00;margin:0 auto;border-radius:3px;height:140px;}
        .shang_payimg img{display:block;text-align:center;width:140px;height:140px; }
        .pay_explain{text-align:center;margin:10px auto;font-size:12px;color:#545454;}
        .radiobox{width: 16px;height: 16px;background: url('http://www.baidow.com/ds/img/radio2.jpg');display: block;float: left;margin-top: 5px;margin-right: 14px;}
        .checked .radiobox{background:url('http://www.baidow.com/ds/img/radio1.jpg');}
        .shang_payselect{text-align:center;margin:0 auto;margin-top:40px;cursor:pointer;height:60px;width:280px;}
        .shang_payselect .pay_item{display:inline-block;margin-right:10px;float:left;}
        .shang_info{clear:both;}
		.shang_info p,.shang_info a{color:#C3C3C3;text-align:center;font-size:12px;text-decoration:none;line-height:2em;}

</style>
</head>

<body>
    <div class="content">
    <p><a href="javascript:void(0)" onClick="dashangToggle()" class="dashang" title="打赏，支持一下">打赏</a></p>
    <div class="hide_box"></div>
    <div class="shang_box">
    	<a class="shang_close" href="javascript:void(0)" onClick="dashangToggle()" title="关闭"><img src="http://www.baidow.com/ds/img/close.jpg" alt="取消" /></a>
        <img class="shang_logo" src="http://www.baidow.com/ds/img/logos.png" alt="百分百源码网" />
    	<div class="shang_tit">
    		<p>感谢您的支持，我会继续努力的!</p>
    	</div>
    	<div class="shang_payimg">
    		<img src="http://www.baidow.com/ds/img/alipayimg.jpg" alt="扫码支持" title="扫一扫" />
    	</div>
    		<div class="pay_explain">扫码打赏，你说多少就多少</div>
    	<div class="shang_payselect">
    		<div class="pay_item checked" data-id="alipay">
	    		<span class="radiobox"></span>
	    		<span class="pay_logo"><img src="http://www.baidow.com/ds/img/alipay.jpg" alt="支付宝" /></span>
    		</div>
    		<div class="pay_item" data-id="weipay">
	    		<span class="radiobox"></span>
	    		<span class="pay_logo"><img src="http://www.baidow.com/ds/img/wechat.jpg" alt="微信" /></span>
    		</div>
    	</div>
    	<div class="shang_info">
    		<p>打开<span id="shang_pay_txt">支付宝</span>扫一扫，即可进行扫码打赏哦</p>
    		<p><a href="http://www.baidow.com" target="_blank" title="百分百源码网">百分百源码网</a> 建议打赏1～10元，土豪随意，感谢您的阅读！</p>
    	</div>
    </div>
    </div>
    <script type="text/javascript">
    $(function(){
    	$(".pay_item").click(function(){
    		$(this).addClass('checked').siblings('.pay_item').removeClass('checked');
    		var dataid=$(this).attr('data-id');
    		$(".shang_payimg img").attr("src","http://www.baidow.com/ds/img/"+dataid+"img.jpg");
    		$("#shang_pay_txt").text(dataid=="alipay"?"支付宝":"微信");
    	});
    });
    function dashangToggle(){
    	$(".hide_box").fadeToggle();
    	$(".shang_box").fadeToggle();
    }
    </script>
        </div>
        <div class="context mt1 clearfix">
          <ul>
            <li class="fl">上一篇：<a href='http://www.baidow.com/jiaocheng/html5jiaocheng/202008/46934.html'>鼠标移出事件的案例以及详解-</a> </li>
            <li class="fr">下一篇：<a href='http://www.baidow.com/jiaocheng/html5jiaocheng/202008/46936.html'>h5实现猎取会员地理定位-</a> </li>
          </ul>
        </div>
      </div>
      <div class="relatenews">
        <div class="tit">
          <h3>相关文章<span></span></h3>
        </div>
        <ul class="list2 clearfix">
          <li><a target="_blank" href="http://www.baidow.com/jiaocheng/html5jiaocheng/202101/75766.html">块级元素和行内元素有什么区别</a></li>
<li><a target="_blank" href="http://www.baidow.com/jiaocheng/html5jiaocheng/202101/75753.html">html怎样让网页居中</a></li>
<li><a target="_blank" href="http://www.baidow.com/jiaocheng/html5jiaocheng/202101/75739.html">html中的锚点是啥</a></li>
<li><a target="_blank" href="http://www.baidow.com/jiaocheng/html5jiaocheng/202101/74983.html">html字体大小怎么设定</a></li>
<li><a target="_blank" href="http://www.baidow.com/jiaocheng/html5jiaocheng/202101/74979.html">浅谈网页中提拔SVG文件可拜访性的几种办法</a></li>
<li><a target="_blank" href="http://www.baidow.com/jiaocheng/html5jiaocheng/202101/74960.html">支撑onload事件的HTML标签是什么</a></li>
<li><a target="_blank" href="http://www.baidow.com/jiaocheng/html5jiaocheng/202101/74948.html">HTML中type有哪些意思</a></li>
<li><a target="_blank" href="http://www.baidow.com/jiaocheng/html5jiaocheng/202101/74944.html">html input有哪些</a></li>

</ul>
      </div>
      <div id="plq" class="mt2">
  <div class="plqt"><span>共有<b>150</b>人阅读，期待你的评论！</span>发表评论</div>
  <form action="/" method="post" name="feedback">
    <div class="plk">
      <input type="hidden" name="dopost" value="send" />
      <input type="hidden" name="comtype" value="comments">
      <input type="hidden" name="aid" value="46935" />
      <input type="hidden" name="fid" id='feedbackfid' value="0" />
      <textarea name="msg" class="ipt-txt2">

昵称：网址：验证码：点击我更换图片

本文标签

广告赞助

能出一分力是一分吧！

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板

, ,
, , ,
,
,
,
,
-
, ,
, ,
可否支撑冒泡:	Yes
可否可以取消:	NO
事件类型:	Event
支撑的 HTML 标签:	, , ,

html5中在元素滚动条在滚动时触发的事件onscroll-

-

, , , , , , , , ,

本文标签

广告赞助

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板

, ,
, ,