Detailed explanation of the example code for javascript to determine the scroll position of the scroll bar-JS Tutorial-php.cn

Detailed explanation of the example code for javascript to determine the scroll position of the scroll bar

伊谢尔伦

Release： 2017-07-19 16:06:16

Original

1098 people have browsed it

We often see a return to the top effect on many websites. When our scroll bar reaches the specified position, the return to the top appears. Otherwise, it will be automatically hidden. Here we will introduce to you the principle and implementation of this effect. method.

When the visible area is smaller than the actual height of the page, it is determined that a scroll bar appears, that is:

if (document.documentElement.clientHeight < document.documentElement.offsetHeight) scroll = true;

Copy after login

To use document.documentElement, you must add a statement to the page header:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Copy after login

Actually, this code does not work because it does not take into account a problem, which is the browser's border. When we get the offsetHeight of the page, it includes the browser The border of the browser is 2 pixels, so at this time clientHeight is always less than offsetHeight under any circumstances, which makes it true even if there is no scroll bar, so we need to correct this error, the code should To change it like this, subtract 4 pixels from offsetHeight, that is:

if (document.documentElement.clientHeight < document.documentElement.offsetHeight-4){
//执行相关脚本。
}

Copy after login

Also, we need to understand here that the above code is to judge the horizontal scroll bar. What we generally need to judge is vertical scrolling. The code is as follows :

if (document.documentElement.clientWidth < document.documentElement.offsetWidth-4){
//执行相关脚本。
}

Copy after login

To determine whether the scroll bar has been pulled to the bottom of the page, you can use the following code

window.onscroll = function (){
var marginBot = 0;
if (document.documentElement.scrollTop){
marginBot = document.documentElement.scrollHeight – (document.documentElement.scrollTop+document.body.scrollTop)-document.documentElement.clientHeight;
} else {
marginBot = document.body.scrollHeight – document.body.scrollTop- document.body.clientHeight;
}
if(marginBot<=0) {
//do something
}
}

Copy after login

Example 2

found online. It's quite browser compatible. The strange thing is that I couldn't find any relevant information in the documentation. Post the code.

/********************
* 取窗口滚动条高度 
******************/
function getScrollTop()
{
    var scrollTop=0;
    if(document.documentElement&&document.documentElement.scrollTop)
    {
        scrollTop=document.documentElement.scrollTop;
    }
    else if(document.body)
    {
        scrollTop=document.body.scrollTop;
    }
    return scrollTop;
}
/********************
* 取窗口可视范围的高度 
*******************/
function getClientHeight()
{
    var clientHeight=0;
    if(document.body.clientHeight&&document.documentElement.clientHeight)
    {
        var clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;        
    }
    else
    {
        var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;    
    }
    return clientHeight;
}
/********************
* 取文档内容实际高度 
*******************/
function getScrollHeight()
{
    return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}
  function test(){
 if (getScrollTop()+getClientHeight()==getScrollHeight()){
  alert("到达底部");
 }else{
  alert("没有到达底部");
 }
}

Copy after login

The above is the detailed content of Detailed explanation of the example code for javascript to determine the scroll position of the scroll bar. For more information, please follow other related articles on the PHP Chinese website!