Home > Article > Web Front-end > Detailed explanation of the example code for javascript to determine the scroll position of the scroll bar

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

伊谢尔伦Original: 2017-07-19 16:06:161074browse

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;

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">

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){
//执行相关脚本。
}

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){
//执行相关脚本。
}

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
}
}

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("没有到达底部");
 }
}

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed code example of how to use javascript to determine whether the scroll bar reaches the bottomNext article：Detailed code example of how to use javascript to determine whether the scroll bar reaches the bottom

See more

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

Related articles