发新贴  快速回复

回到顶部小练习问题!!!!!

ayang
2016-04-01 10:16
<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
                #div1{
                        background: red;
                        width: 200px;
                        height: 200px;
                        position: fixed;
                        bottom:0;
                        right: 0;
                        display: none;
                }
        </style>
        <script type="text/javascript">
                window.err= = function(){
                        var oDiv = document.getElementById('div1');
                        onscroll = function(){
                                if(document.documentElement.scrollTop > 500){
                                        oDiv.style.display = 'block';
                                }
                        }

                        oDiv.err= = function(){
                                // document.documentElement.clientHeight = 0;
                                document.documentElement.scrollTop = 0;
                                this.style.display = 'none';
                        }


                }
        </script>
</head>
<body style="height: 2000px;">
        <div id="div1">
                
        </div>
</body>
</html>


为啥foxfire 和 IE下正常。

到百度浏览器里。 滚动条触发后 一直是 0 ?
849800875
百度浏览器用的应该是ie的内核,在ie下确实有这样的问题存在。
    作为前端来说,开发一般不会用例如360浏览器,qq浏览器,淘宝浏览器,百度浏览器等一些自称独自研发,却一直用着别人内核的浏览器。
2016-04-03 15:09  回复本帖
ayang
forum.php?mod=redirect&goto=findpost&pid=94479&ptid=43668
百度浏览器用的应该是ie的内核,在ie下确实有这样的问题存在。
    作为前端来说,开发一般不会用例如360浏览 ...

谢指教, 可是有没有什么办法可以解决吗?
2016-04-05 09:50  回复本帖
惊鸿一面
这两天在写一个JS的网页右键菜单,在实现菜单定位的时候发现了这个问题:chrome居然不认识document.documentElement.scrollTop!

看前辈们的文章,纷纷表示如果有文档声明(即网页第一句的docType)的情况下,标准浏览器是只认识documentElement.scrollTop的,但chrome虽然我感觉比firefox还标准,但却不认识这个,在有文档声明时,chrome也只认识document.body.scrollTop.

由于在不同情况下,document.body.scrollTop与document.documentElement.scrollTop都有可能取不到值,那到底网页的scrollTop值怎么得到呢?难道又要用javascript进行判断?

其实不必。因为document.body.scrollTop与document.documentElement.scrollTop两者有个特点,就是同时只会有一个值生效。比如document.body.scrollTop能取到值的时候,document.documentElement.scrollTop就会始终为0;反之亦然。所以,如果要得到网页的真正的scrollTop值,可以这样:

var sTop=document.body.scrollTop+document.documentElement.scrollTop;

这两个值总会有一个恒为0,所以不用担心会对真正的scrollTop造成影响。一点小技巧,但很实用。
2016-04-05 15:02  回复本帖
惊鸿一面
<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
                #div1{
                        background: red;
                        width: 200px;
                        height: 200px;
                        position: fixed;
                        bottom:0;
                        right: 0;
                        display:none;
                        
                }
        </style>
      
</head>
<body style="height: 2000px;">
ffffffffffffffffffffffffffffffffffffffffffffff
        <div id="div1">
                
        </div>
          <script>
                       var oDiv = document.getElementById('div1');
                       var sTop=0
                        window.onscroll = function(){
                        sTop=document.body.scrollTop+document.documentElement.scrollTop;
                            if(sTop>500){
                            oDiv.style.display="block";
                            }
                        }

                        oDiv.err= = function(){
                                document.body.scrollTop=document.documentElement.scrollTop=0;
                                this.style.display = 'none';
                        }
                      


        </script>
</body>
</html>
2016-04-05 15:23  回复本帖
ayang
forum.php?mod=redirect&goto=findpost&pid=95629&ptid=43668
这两天在写一个JS的网页右键菜单,在实现菜单定位的时候发现了这个问题:chrome居然不认识document.documen ...

十分感谢。。 
2016-04-06 09:37  回复本帖
ayang
forum.php?mod=redirect&goto=findpost&pid=95630&ptid=43668
Document
        
                #div1{


谢谢啦。。一起加油。
2016-04-06 09:37  回复本帖
惊鸿一面
嘿嘿 收到你的回复挺开心
2016-04-06 21:12  回复本帖
kenny
我也遇到过这个问题,这个帖子给了很大帮助。
2016-09-05 17:03  回复本帖
登录 后才可以发表回复