js滚动条向下

最新推荐文章于 2023-11-10 12:46:32 发布

ZERO·HERO

最新推荐文章于 2023-11-10 12:46:32 发布

阅读量1k

点赞数

分类专栏： Java

本文链接：https://blog.csdn.net/qq_38558683/article/details/82381245

版权

Java 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

需要jquery


<html> 
<head>
	<script type="text/javascript" src="jquery-2.1.1.js"></script>
</head>
<body>
            <div id="scrolldIV" style="overflow:auto; height: 100px; width: 400px; border: 1px solid #999;">
            </div>
            <input type="button" value="插入一行" onclick="add();">     
	        <script type="text/javascript">
                var t=true;
                function add()
                {
                    var now = new Date(); 
                    var div = document.getElementById('scrolldIV');
                    div.innerHTML = div.innerHTML + 'time_' + now.getTime() + '<br />'; 
                    if(t)  
                    div.scrollTop = div.scrollHeight;         
                }
				$("#scrolldIV").scroll(function(){
					var scrollHeight = document.getElementById("scrolldIV").scrollHeight;//251
					var scrollTop = document.getElementById("scrolldIV").scrollTop;//0-18
					var clientHeight = document.getElementById("scrolldIV").clientHeight;//233
                    var div = document.getElementById('scrolldIV');
					console.log(scrollHeight);
					if (scrollHeight - clientHeight == scrollTop) {
                        t=true;	    
					}

                    var agent = navigator.userAgent;
                if (/.*Firefox.*/.test(agent)) {
                        document.addEventListener("DOMMouseScroll", function(e) {
                        e = e || window.event;
                        var detail = e.detail;
                    if (detail > 0) {
                        console.log("鼠标向下滚动");
                    } else {
                        t=false;
                    }
                    });
                } else {
                    document.onmousewheel = function(e) {
                    e = e || window.event;
                    var wheelDelta = e.wheelDelta;
                    if (wheelDelta > 0) {
                        t=false;
                    } else {
                    console.warn("鼠标向下滚动");
                    }
                    }
                }

				})
            </script>
</body>
</html>