精华内容
下载资源
问答
  • onscroll

    2015-09-29 22:11:00
    滚动条出现在body上,触发window上的scroll事件,如果滚动条出现在div上,则会触发div.onscroll 不会触发window.onscroll <div id="rightDiv" > <div id="header"></div> <div id=...

     

    一、触发机制

    滚动条出现在body上,触发window上的scroll事件,如果滚动条出现在div上,则会触发div.onscroll 不会触发window.onscroll

     

     

    <div id="rightDiv" >
            <div id="header"></div>
            <div id="nav">nav</div>
            <div id="list">list</div>
        </div>

     

    var scrollDiv = document.getElementById('rightDiv');
        scrollDiv.onscroll = scrollEvt;
        window.onscroll = winScroll;
    
        function winScroll(){
            console.log('window scroll');  //不会触发
        }
        function scrollEvt(){ 
            console.log('scroll');  //触发
    }

     

    二、scrollTop 获取

    1、IE声明了doctype时,scrollTopdocumentElement上;

          未声明doctype时,情况较复杂:

           IE1011:使用两种方法获取都可以:documentElementbody 

           IE7\8\9:使用documentElement.scrollTop

           IE5:使用body.scrollTop

      注:IE9及以上才支持pageYOffset

      IE不支持scrollYFFChrome支持scrollYpageYOffset

    2、FF声明doctype时,使用documnet.documentElement.scrollTop

        未声明doctype时,使用document.body.scrollTop获取

    3、Chrome:不管声明doctype与否,scrolltop都在body

     window.pageYOffset  (Safari)

     兼容性的写法:

    var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

     

     具体测试如下:

     

     

     

     

     

     

     

    DTD相关说明:

    页面具有 DTD,或者说指定了 DOCTYPE 时,使用 document.documentElement。

    页面不具有 DTD,或者说没有指定了 DOCTYPE,时,使用 document.body。

    在 IE 和 Firefox 中均是如此。

    为了兼容,不管有没有 DTD,可以使用如下代码:

    var scrollTop = window.pageYOffset  //用于FF
                    || document.documentElement.scrollTop  
                    || document.body.scrollTop  
                    || 0;

    documentElement 和 body 相关说明:

    body是DOM对象里的body子节点,即 <body> 标签;

    documentElement 是整个节点树的根节点root,即<html> 标签;

    DOM把层次中的每一个对象都称之为节点,就是一个层次结构,你可以理解为一个树形结构,就像我们的目录一样,一个根目录,根目录下有子目录,子目录下还有子目录。

    以HTML超文本标记语言为例:整个文档的一个根就是,在DOM中可以使用document.documentElement来访问它,它就是整个节点树的根节点。而body是子节点,要访问到body标签,在脚本中应该写:document.body。

    转载于:https://www.cnblogs.com/lydialee/p/4847433.html

    展开全文
  • onScroll onScroll行为
  • onscroll事件揭秘

    2016-01-18 08:54:55
    onscroll事件揭秘
  • onscroll事件

    千次阅读 2018-08-02 09:16:38
    window.onscroll事件 &amp;lt;script&amp;gt; window.onscroll = function () { var scrollTop = $(this).scrollTop(); //console.log(&quot;scrollTop = &quot; + scrollTop); var ...

    window.onscroll事件

    <script>
        window.onscroll = function () {
            var scrollTop = $(this).scrollTop();
            //console.log("scrollTop = " + scrollTop);
            var scrollHeight = $(document).height();
            //console.log("scrollHeight = "+ scrollHeight);
    	     var windowHeight = $(this).height();
            //console.log("windowHeight = "+ windowHeight);
            //加载更多的视频
             
            if (scrollTop + windowHeight == (scrollHeight)) {
            	console.log(scrollTop,windowHeight,scrollHeight);
            	 //console.log(scrollHeight);
                var nextpage = Number($("#ul_showlist").attr("data-pagenum")) + 1;//下一页
                var pagecount = Number($("#ul_showlist").attr("data-pagecount"));//总页数,开始载入的时候修改
                if (nextpage <= pagecount) {
                    getNextPage(nextpage);
                }
                else {
    
                }
            }
        }
        
        function getNextPage(nextpage) {
            //根据nextpage访问服务端返回数据data或者是否最后一页
    
            var data;
            setData(data);
            //成功后修改下一页
            $("#ul_showlist").attr("data-pagenum", nextpage);
        }
        
        
        function setData(data) {
            //data是数据源
            var str = "";
            for (var i=0; i < 2; i++) {
                str += "<li>";
                str +="<a href='showdetail.html'>";//详细页
                str += "<div class=\"left\">";
                str += "<img src=\"${contextPath}/images/showlist2.jpg\"/>";
                str += "</div>";
                str += "<div class=\"right\">";
                str += "<h4>孤芳自赏"+i+"</h4>";
                str += "<p>宝玉说过:“女人是水做的贾宝玉有句名言:女人是水做的,见了便觉清爽,男人是泥做的,见了便觉浑浊。 年轻时..</p>";
                str += "<div class=\"support\">";
                str += "<span class=\"icon love\"></span><span>99</span>";
                str += "<span class=\"icon comment\"></span><span>10</span>";
                str += "</div>";
                str += "</div>";
                str +="</a>";
                str += "<em></em>";
                str += "</li>";
            }
            $("#ul_showlist").append(str);
        }
    </script>
    

    window.onscroll事件监听不滑动的问题:
    获取windowheigh时获取高度错误,修改为 var windowHeight = window.innerHeight;问题解决了

    展开全文
  • 各浏览器对document.body.onscroll,window.onscroll,document.documentElement.onscroll的兼容性

    各浏览器对document.body.onscroll,window.onscroll,document.documentElement.onscroll的兼容性

    https://blog.csdn.net/qq_26445509/article/details/51153153

    展开全文
  • onscroll 事件

    2018-04-03 09:48:35
    &lt;div&gt; 元素滚动时执行 JavaScript&...div onscroll="myFunction()"&gt;定义和用法onscroll 事件在元素滚动条在滚动时触发。提示: 使用 CSS overflow 样式属性来创建元素的滚动条。...

    <div> 元素滚动时执行 JavaScript

    <div onscroll="myFunction()">


    定义和用法

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

    提示: 使用 CSS overflow 样式属性来创建元素的滚动条。


    展开全文
  • javascript onscroll

    2016-06-13 10:05:51
    onscroll 事件在元素滚动条在滚动时触发。 提示: 使用 CSS overflow 样式属性来创建元素的滚动条。 语法 HTML 中: element onscroll="myScript"> JavaScript 中: window.onscroll=function(){myScript}; ...
  • onscroll-newsagg-源码

    2021-07-02 12:52:10
    onscroll-newsagg 简单的新闻聚合器。 使用:Node.js 构建MongoDB 猫鼬Feedparser 恢复蓝鸟约曼
  • onScrollStateChanged 和 onScroll
  • window.onscroll

    2021-01-29 17:25:42
    window.onscroll=function(){ varscrollT=document.documentElement.scrollTop; }
  • onscroll的用法

    千次阅读 2017-12-15 10:00:35
    onscroll是在元素轴滚动时触发的。eg:window.onscroll或document.onscroll是在浏览器滚动条滚动时触发的。eg:返回顶部window.onscroll = function () { var t = document.documentElement.scrollTop || document....
  • onscroll事件与onscrollTop

    2020-12-03 18:26:14
    onscroll事件以及onscrollTop的使用 因为很久没有用原生js了所以导致很多东西都生疏了,今天一个案例用到了onscroll感觉很实用但是好像之前没怎么了解过(也可能是我忘干净了-.-)所以在这里记录一下 onscroll事件 ...
  • onload与onscroll

    2018-03-11 16:13:05
    最近新学到的是window.onscroll ,是当浏览器滚动条滚动时会触发 onscroll 事件,通常情况下指上下滚动条滚动。 window.onscroll = function(){ var t = document.documentElement.scrollTop || document...
  • 的内容是说说最近在工作中遇到过的常见的问题。主要是关于JavaScript触发onScroll事件的函数节流,文中由一个常见的问题开始展开,一步步的介绍解决的方法,有需要的朋友们下面来跟着小编一起看看吧。
  • window onscroll无效问题

    千次阅读 2019-01-18 14:57:13
    window onscroll无效问题
  • 在使用页面滚动元素的时候,总会遇到几个dhtml属性存在兼容问题,这里介绍一个常用的window.onscroll和document.body.onscroll,它们的含义一样,但是在不同浏览器的表现不一样 当页面滚动的时候:window....
  • onscroll是浏览器的滑动监听事件,当滑动鼠标或者拖动滚动条的时候,就会触发onscroll事件。 scrollTop指的是浏览器页面卷起的高度。 对于scrollTop来说,有两种获取方法 使用document.documentElement.scrollTop...
  • onscroll 事件和onScrollCapture事件

    千次阅读 2020-11-24 10:47:48
    onscroll 事件在元素滚动条在滚动时触发。 HTML 中: <element onscroll="myScript"> JavaScript 中: object.onscroll=function(){myScript}; JavaScript 中, 使用 addEventListener() 方法: object....
  • 主要给大家介绍了关于React.Js添加与删除onScroll事件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
  • window 的 onload、onresize、onscroll 事件,跟其他的事件不一样,它不能用 attachEvent 或 addEventListener 来添加于是本人想了一些另类的方法,需要了解的朋友可以参考下
  • 通过代码测试 ListView onTouchEvent和onScroll执行顺序 ACTION_DOWN->ACTION_MOVE->(Scroll,这里不一定会去onScroll如果MOVE没有滚动的话,就没有)->ACTION_UP

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 33,250
精华内容 13,300
关键字:

onscroll