`
wuzijingaip
  • 浏览: 329800 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

获取滚动条位置

阅读更多
javascript 获取滚动条高度 /********************
* 取窗口滚动条高度
******************/
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);
}


获取坐标: IE  (event.x  event.y) 

获取滚动条位置:

     document.body.scrollTop (滚动条离页面最上方的距离)

     document.body.scrollLeft   (滚动条离页面最左方的距离)

当我用js获取当前垂直或者水平方向滚动条位置的时候,使用"document.body.scrollTop"或者"document.body.scrollLeft"是无效的,得到的数值永远是0。但是,当写在“onscroll”事件里面的时候,上述方法可以获得当前滚动条的位置。

当网页最前面有以下内容:

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

     document.documentElement.scrollTop (滚动条离页面最上方的距离)

     document.documentElement.scrollLeft   (滚动条离页面最左方的距离)

所以为了准确取得当前滚动条的位置,正确的使用方法是:

      document.documentElement.scrollTop:垂直方向
     document.documentElement.scrollLeft:水平方向


分享到:
评论

相关推荐

    【JavaScript源代码】JavaScript 获取滚动条位置并将页面滑动到锚点.docx

    ### JavaScript 获取滚动条位置并将页面滑动到锚点 #### 前言 在现代Web应用开发中,尤其是在移动端的应用场景下,用户交互体验尤为重要。其中一项常见的需求就是实现页面内的快速定位,即通常所说的“锚点”功能...

    页面加载时从cookie获取滚动条位置信息

    1、整体浏览器滚动条页面加载时从cookie获取滚动条位置信息,然后附值给滚动条 从而定位滚动条位置 2、在 div 或者在 table滚动条加载时从cookie获取滚动条位置信息,然后附值给滚动条从而定位滚动条位置

    易语言源码易语言取滚动条位置源码.rar

    7. **实际应用**:了解如何获取滚动条位置在实际编程中非常实用,例如在实现数据浏览、文本编辑器或者自定义控件时,滚动条位置的实时更新可以帮助用户更好地浏览内容。 8. **学习资源**:易语言社区和教程通常提供...

    滚动条刷新定位

    虽然这种方法可以实现实时跟踪滚动条位置的功能,但并不符合“滚动条刷新定位”的需求。正确的做法应该是将滚动位置保存在本地存储中,而不是实时更新某个元素的位置。 #### 五、注意事项 1. **兼容性问题**:不同...

    Javascript 获取滚动条位置等信息的函数

    获取滚动条位置在不同浏览器之间可能会有不同的实现方式,因为每个浏览器可能有自己的DOM(文档对象模型)实现。在JavaScript中,我们可以使用`window`对象的一些属性来获取滚动信息,但要注意的是,这些属性在某些...

    C#利用API判断滚动条的位置

    具体代码分析需要查看文件内容,不过可以推测它可能包含了定义窗口类,按钮事件处理,以及调用API获取滚动条位置的代码段。 通过理解和应用这些API,开发者可以创建出更复杂的用户界面,比如动态响应滚动条变化的...

    解决多种浏览器获取滚动条高度

    这里主要判断了IE浏览器,因为IE在获取滚动条位置方面与其他浏览器有所不同。 2. **选择正确的body或documentElement对象**:由于IE在标准模式和怪异模式下使用的对象不同,因此需要根据`document.compatMode`来决定...

    获取鼠标在页面上的位置(包括滚动条)

    ### 获取鼠标在页面上的位置(包括滚动条) #### 概述 在网页开发过程中,有时候我们需要获取用户鼠标在页面上的具体位置,特别是当页面存在滚动条时,这将有助于实现某些交互功能,如动态提示、点击反馈等。本文...

    易语言滚动条位置判断

    易语言滚动条位置判断是编程领域中涉及到用户界面交互的一个重要功能。滚动条通常用于查看超过屏幕大小的内容,而判断滚动条的位置则是为了更好地控制和响应用户的操作。在这个主题中,我们将深入探讨如何在易语言中...

    易语言滚动条位置判断源码.7z

    4. **获取滚动条位置**:使用“取滚动条位置”命令,可以获取当前滚动条的位置。 5. **判断滚动条位置**:根据需要,我们可以编写条件语句来判断滚动条是否在特定位置。例如,检查是否在顶部、底部、中间或其他...

    完美解决ASP.NET回传后div滚动条位置复位的问题

    // 获取滚动条位置的值 int scrollTop = Convert.ToInt32(hiddScollTop.Value); // 使用客户端脚本恢复滚动条位置 ScriptManager.RegisterStartupScript(this, this.GetType(), "RestoreScroll", $"document....

    Uniapp微信小程序滚动条跳转到元素高度

    Uniapp框架的针对微信小程序的使滚动条跳转到指定元素位置。直接复制粘贴内容,然后配置好page.json。就可以直接查看效果。

    易语言取滚动条位置

    易语言取滚动条位置源码,取滚动条位置,获取位置

    webbrowser滚动条位置

    我们可以调用`WebBrowser.Document`属性获取当前加载的HTML文档,然后通过`IHTMLDocument2`接口来获取滚动条的位置。以下是一个简单的示例: ```csharp private void GetScrollBarPosition() { if (webBrowser1....

    随意控制IE滚动条上下滚动多少像素

    因此,当我们需要在IE中获取滚动条位置或控制滚动时,需要使用特定的API,如`GetScrollPos`函数。然而,正如描述中提到的,`GetScrollPos`在IE中可能无法正确地返回滚动条的位置。 为了解决这个问题,我们可以使用...

    【JavaScript源代码】vant list组件滚动保留滚动条位置.docx

    当从一个需要缓存的页面跳转时,我们获取当前页面(`from`)的滚动条位置,并将其保存到`from.meta.scrollTop`中。这样,当用户返回时,这个位置信息依然存在。 最后,在列表组件内部,我们可以利用组件的生命周期...

    易语言源码易语言滚动条位置判断源码.rar

    5. **接口调用**:易语言提供了丰富的系统调用和库函数,开发者可以通过这些接口获取滚动条状态或修改滚动条设置。例如,可以使用“系统.滚动条.设置位置”函数来直接设置滚动条的位置。 通过研究这个源码,你可以...

    javascript获取滚动条高度 页面宽度与高度

    ### JavaScript 获取滚动条高度、页面宽度与高度 在前端开发中,经常需要处理与浏览器窗口相关的操作,例如响应式设计、动态布局调整等。本文将详细介绍如何使用JavaScript来获取滚动条的高度、页面的宽度和高度。 ...

    起步Bex5获取gridtr的id和滚动条定位

    // 使用jQuery获取滚动条位置并设置新位置 $(tr).parents().find('.x-grid-bdiv').scrollTop(this.height); }; Model.prototype.grid1RowClick = function(event) { this.rowID = event.rowID; // 记录点击的行...

Global site tag (gtag.js) - Google Analytics