如何获取 scroll 滚动条高度

windowscrollY 当前滚动的高度

windowscrollMaxY 当前滚动条的总高度

以上只在 火狐浏览器 通过测试

其他浏览器，我没有，没测：

scrollY 0

scrollMaxY 515

这里有一个例子，希望可以帮到你

$(window)scroll(function()

{

//

当滚动到最底部以上100像素时，

加载新内容

if

($(document)height()

-

$(this)scrollTop()

-

$(this)height()

<

100)

{

if

(flag)

{

var

$boxes

=

$(getList());

$containerappend($boxes)masonry('appended',

$boxes);

}

}

});

我们先来看看效果：

当用户点击输入框时，输入框会d到数字键盘正上方。这样就完美的解决了键盘遮挡输入框的问题。

当输入框获得焦点时，如果这个输入框被挡住，就在页面最底部增加一个空白div，这个div的高度就是被遮住的输入框到数字键盘顶部的距离。当输入框失去焦点时，就移除这个新增的div。

难点：新增div高度的计算

可以看上面这个草图，最后我们需要计算出Z的值，这个Z就是底部新增div的高度。

（1）可视区域高度的计算（visible）

（2）输入框到页面顶部的距离（toTop）

（3）滚动高度（hide）

遇到的坑：我看到网上有很多人都用这个方法，但是我这样使用的时候打印出来的值不论怎样都是0。

思考了很久才发现一个问题，就是如果我们要获取滚动高度，必须满足两个条件，即该元素要有滚动条并且滚动条发生了滚动。上面那种方法获取的是body的滚动高度，但是这个页面的body并没有发生滚动，发生滚动的是一个class为content的元素，像下面这样就能获取到滚动高度了：

（4）数字键盘高度（keyboard）

遇到的坑：刚开始我给了这个keyboard一个固定的值，在chrome上调试是正常的，但是放到真机上就不行了。因为这个keyboard的高度是动态变化的，宽一点的手机这个高度就会高一些，窄一点的手机这个高度就会小一点。因为项目里采用rem适配方法，不同的机型fontSize是变化的，所以我们要计算键盘的真实高度，就要根据这个fontSize来计算,如下图所示

（5）创建div插入页面中，并将滚动条滚动到指定高度

将Z计算出来，就可以创建一个高度为Z的div。记住在每次将创建的dev append到页面中的时候，要让滚动条滚动一定的高度，这样才能让被遮挡的输入框正好d到键盘上面。

在Win正式版中，很多用户都发现了，微软为适应触摸屏，在Win10中微软对传统桌面下的界面元素做了进一步调整，明显的变化是一些控件、图标的尺寸变大了，比如窗口标题栏以及滚动条。如果你使用的是桌面环境，只通过键鼠 *** 作，希望调小窗口标题栏以及滚动条尺寸，可参考下面的方法： • 按Win+R打开运行，输入regedit回车打开注册表编辑器; • HKEY_CURRENT_USERControl PanelDesktopWindowMetrics; • 在右侧找到CaptionHeight字符串值，它代表窗口标题栏的高度，其值计算方法为：-15期望高度(像素)。比如，希望窗口标题栏高度为18，那么其值应该为-1518=-270; Win10窗口标题栏高度及滚动条宽度怎么设置 修改完成后注销重新登录就可以看到效果。 滚动条宽度对应的注册表键值为ScrollWidth，其计算方法与CaptionHeight相同。 修改前后对比如下图所示： Win10窗口标题栏高度及滚动条宽度怎么设置

您好！很高兴为您答疑！

给您提供一个代码，根据需要稍做修改就可以了，兼容各浏览器：

function getViewSizeWithoutScrollbar(){//不包含滚动条

return {

width : documentdocumentElementclientWidth,

height: documentdocumentElementclientHeight

}

}

function getViewSizeWithScrollbar(){//包含滚动条

if(windowinnerWidth){

return {

width : windowinnerWidth,

height: windowinnerHeight

}

}else if(documentdocumentElementoffsetWidth == documentdocumentElementclientWidth){

return {

width : documentdocumentElementoffsetWidth,

height: documentdocumentElementoffsetHeight

}

}else{

return {

width : documentdocumentElementclientWidth + getScrollWith(),

height: documentdocumentElementclientHeight + getScrollWith()

}

}

}

您可以在火狐社区了解更多内容。希望我的回答对您有所帮助，如有疑问，欢迎继续在本平台咨询。

以上就是关于如何获取 scroll 滚动条高度全部的内容，包括:如何获取 scroll 滚动条高度、如何用JS获取鼠标滚动高度，再触发相应的事件。速救！！！、键盘遮挡输入框解决方案等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！