jQuery中获取元素到页面可视区顶端距离有什么方法

$('h2#answers-title')offset()top-$(document)scrollTop();

$('h2#answers-title')offset()top h2#answers-title元素相对于document的垂直位置

$(document)scrollTop() 整个文档被上卷的高度

2者差就是$('h2#answers-title')相对于当前浏览器视图窗口的垂直位置

最近在项目开发中，遇到一个令人头疼的问题。当一个容器能左右滑动时，手指在该容器上做上下滑动的手势页面不会上下滚动（在容器外围上下滑动是可以的，所以排除页面的scroll问题），并且这个问题只会在ios上出现，安卓没有。

通过查资料发现，原生的IOS scroll有这个问题，所以就使用了本文所讲的better-srcoll来解决。下面来讲讲如何使用better-scroll来实现左右和上下滚动。

2引入better-scroll

使用BScroll实例化之前必需要等待DOM渲染完成。

产生左右滚动的条件是子盒子内的宽度必须要大于父盒子的宽度，所以我们在用better-scroll时，必须要先得到滚动区域的尺寸和父盒子的尺寸，来计算出是否能滚动。

下面是一个小demo

（1）class为content的div的父盒子，在此区域内滚动，需要通过ref拿到DOM。

（2）ul元素是子盒子，包含若干个li元素，可以通过li元素的宽度动态进行计算，也可以通过ref获取dom

给li标签90px的宽度，确保子盒的宽度大于父盒子的宽度

3使用better-scroll

(1) 首先拿到所有的li元素的宽度，赋值给ul元素

(2) 生成BScroll实例，其中this$refscontent就是父盒子的DOM，在此区域内滚动。

需要给父元素一个固定的高度，并且overflow属性为hidden

4效果图

使用better-scroll后可能会出现点击事件发生两次的情况，这时只需要在配置参数

click改为false就可以了。

想要了解更多参数及其使用方法请前往： better-scroll文档地址

获取到当前滚动加载的el-table表格节点

注意的是 如果存在多个表格，用ref获取dom节点，需要指定为第一个，

并且是当前dom节点下的bodyWrapper元素，

然后给这个元素添加滚动事件

this$nextTick(function(){

var dom =this$refs[`personTable_${thatscrollTableId}`];

    var tableBodyEle = dom[0]bodyWrapper;

    tableBodyEleaddEventListener('scroll', thatonPersonScroll);

})

滚动加载的判断条件：

let inner = that$refs['personTable_'+thatscrollTableId][0]bodyWrapper;

let scrollTop = innerscrollTop，//当前元素区域的滚动条高度

// 变量windowHeight是可视区的高度

let windowHeight = innerclientHeight || innerclientHeight

// 变量scrollHeight是滚动条的总高度

let scrollHeight = innerscrollHeight || innerscrollHeight

if (scrollTop + windowHeight === scrollHeight) {//滚动条滚出的高度加上可视区高度 等于滚动条的总高度，则需要加载

    if (thatscrollPersonFlag) {

        //设置一个滚动加载的开关，默认为true

        //滚动一次变为false

        //滚动一次如果当前数据数量小于总数，要置为true；

        thatscrollPersonFlag =false

        var signatoryNo = thatscrollTableId;

        var pageSize =40;

        thatstartPersonRow +=40;

        thatloading =true;

        _getPersonSignatory({signatureId:thissignatureId,startRow:thatstartPersonRow,pageSize,signatoryNo})then(res=>{//请求数据的接口

        thatloading  =false;

        if(resdatasuccess){

                thatruleFormSignerpersonSignerListfrontendDataforEach(item=>{

                    if(itemsignatoryId == thatscrollTableId){

                        if(itemmemberListlength < resdataresulttotal){//如果当前滚动加载的盒子中的成员变量小于总数，则开关还是打开状态  否则是关闭状态

                            thatscrollPersonFlag =true;

                           }

                        }

                    })

            }

        })

        }

}

varsTop=0,

docE=documentdocumentElement,

docB=documentbody;

if(docE&&docEscrollTop){

sTop=docEscrollTop;

}elseif(docB&&docBscrollTop){

sTop=docBscrollTop;

}

consolelog(sTop)

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。

javascript组成一个完整的JavaScript实现是由以下3个不同部分组成的：核心（ECMAScript）、文档对象模型（DocumentObjectModel，简称DOM）、浏览器对象模型（BrowserObjectModel，简称BOM）。

Jquery可以用height(),来获取DOM元素的高。示例如下：

<script src=">

window是一个顶层的全局对象，表示的是浏览器窗口。而document是指文档对象，他是window对象下的一个子对象。一般的，如果是基于浏览器的 *** 作，比如滚动条什么的。就要用window对象下的scrollX这些属性来获取一些必要属性来确定滑块或是页面的位置。

这里列举一下关于滚动位置获取的方法：

scrollBy 内部调用了scrollTo，它是 基于当前位置的相对滑动 ；

scrollTo 是 绝对滑动 ，因此如果利用相同输入参数多次调用scrollTo()方法，由于View初始位置是不变只会出现一次View滚动的效果而不是多次。

scrollX 滚动值 ，可以理解为滚动了多少。该属性是三大家族中scroll家族的成员，个人觉得还是比较容易理解的。实在不懂的可以查看三大家族内容

scrollTop 该方法由jQuery提供，返回当前滑动的位置并设置滑动的垂直位置。

PS大致就是这几种方法吧，以后碰到其他的会更新内容~

以上就是关于jQuery中获取元素到页面可视区顶端距离有什么方法全部的内容，包括:jQuery中获取元素到页面可视区顶端距离有什么方法、使用better-scroll解决ios滚动问题、el-table中的数据滚动加载实现等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！