Javascript 有没有一种方法可以计算溢出设置为自动时，您在div中滚动了多远？

我需要找出我在一个div中滚动了多远。我不能使用window属性来找到这个值，因为窗口没有滚动。有没有办法做到这一点？

您可以使用JQuery通过使用

$（document.scrollTop（）

：

---

这并不难做到：

抓取滚动的元素

为滚动到该元素设置事件侦听器

获取元素的

scrollTop

值

演示：

回答： 与

scroll

事件结合使用，您可以使用属性

scrollTop

（）、

scrollHeight

（）和计算的CSS

高度

let {scrollTop, scrollHeight} = e.currentTarget, 
height = +getComputedStyle(e.currentTarget)["height"].slice(0,-2);

注意：我们使用

+

运算符将

getComputedStyle

和

slice

返回的字符串强制转换为

数字。这很好，因为我们确切地知道我们得到了什么（默认情况下，高度总是使用
px
来定义），并且我们通过切掉
px
知道值将始终是一个数字。如果您不确定返回值（例如，
rem
），更精确的方法是使用正则表达式删除非数字：

...
height = +getComputedStyle(e.currentTarget)["height"].replace(/\D/g, "");


这些是什么？
scrollTop
是从元素顶部滚动的距离。它从0开始，并递增，直到达到滚动极限

scrollHeight
是总距离加上元素的原始高度

height
只是元素的高度

为什么这很重要？

要确定滚动的距离，可以使用
（滚动高度-高度）

如下例所示：


demo.addEventListener（“滚动”），函数（e）{
设{scrollTop，scrollHeight}=e.currentTarget，
高度=+getComputedStyle（e.currentTarget）[“高度”].slice（0，-2）；
log（“Scrolled”+parseInt（scrollTop）+“/”+parseInt（scrollHeight-height））；
});
html，正文{
溢出：隐藏；
}
div{
位置：相对位置；
宽度：50%；
左：钙（50%-25%）；
溢出：自动；
高度：101vh；
背景：rgba（20,20100,3）；
填充：0px；
边际：0px；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。多内克泰利斯，莫利斯，欧盟车辆，苏西皮特奎斯尼斯。乌贼、大菱鲆、小慈姑。在faucibus中，Interdum和malesuada在第一次同侧前就出名了。我的生命是不可能的。佩伦特式的《莫利斯舌苔》是一本关于世仇的著作。多奈克·鲁图姆·奥迪奥元素，生命之源。在时间上，我们需要一种新的方法，一种新的方法，一种新的方法，一种新的方法。Donec blandit cursus tortor在malesuada。前庭浮肿，耳垂，舌苔，鼻翼。
佩伦茨克酒后驾车。Fusce sit amet调味品酒后驾车。Donec sodales urna nec nisl commodo，ac porta magna CONCETETUR。虎口浮雕和肘部浮雕同侧前庭；Donec tincidunt tellus nunc，在accumsan orci scelerisque sed。悬挂式设施是马萨（feugiat massa）的封地，是智者（egestas sapien tempus nec）。从同一个角度看，乌贼是一种致命的疾病。克拉斯·希特·艾米特·斯克利斯·利奥，一个温文尔雅的傻瓜。狮子座的人是最幸运的。非阿尔库马利苏亚达的库拉比图尔、多洛·奎斯、比本杜姆·奥奇。前庭为前庭，前庭为前庭，前庭为前庭。子宫颈前庭a为妊娠期子宫颈前庭a。这是我的名言。萨格蒂·弗林尼利亚·夸姆（sagittis fringilla quam）的日子过得很愉快，因为他是自由主义者。mollis rutrum的Present suscipit nulla。这是一个充满生机和活力的家族。
悬而未决的悬而未决的悬而未决的悬而未决的悬而未决的悬而未决的悬而未决的悬而未决的悬而未决的悬而未决的悬而未决的悬而未决的悬而未决的悬而未决的悬而未决的悬而未决的悬而未决的问题。前庭流苏。Suspendisse vel sem tincidunt，调味品urna at，Magnasim magna。丘脑枕直肌按摩面部。奎斯克是尼索，世仇的维塔·佩伦茨克·维尔，亨德雷特·塞德尼姆。但在酒后驾车时，威尼斯人坐在艾米特·利古拉（amet ligula）的座位上。佩伦特斯克乌斯乌斯普特埃吉斯塔。在福西布斯，这是一只猫科动物。维韦拉turpis坐在amet pulvinar。阿利夸姆·佩伦茨克·多勒·普尔文纳·埃格斯塔斯。慈姑。前庭不属于同侧前庭，前庭为菱形前庭，前庭为单侧前庭，前庭为单侧前庭，前庭为单侧前庭，前庭为单侧前庭，前庭为单侧前庭，前庭为单侧前庭，前庭为单侧前庭，前庭为单侧前庭，前庭为单侧前庭。
这是一个直径为2.5毫米的圣殿。努克-韦尔塞佩尔舌舌。此外，还包括意大利、意大利、意大利、意大利、意大利、意大利、意大利等。塞德·马莱苏阿达非尼斯奎斯饮食。发酵门。整数id massa位于et dolor的orci mollis accumsan。不可剥夺的权利、身份的尊严、不可剥夺的权利、不可剥夺的权利、不可剥夺的权利、不可剥夺的权利、不可剥夺的权利、不可剥夺的权利。Morbi和laoreet sapien，暂时的malesuada tellus。佩伦特斯·莱克图斯·利奥，埃吉斯塔·埃吉斯塔·福西布斯·维塔，达皮布斯·非埃尼姆。两人一组，一人一组。无前庭、无前庭、无前庭、无前庭。
这是一个很好的例子。阿利奎姆·维尔·阿库姆·马萨，我是奥纳雷·阿库。无齿无齿无齿无齿无齿无齿无齿无齿无齿无齿无齿无齿无齿无齿无齿无齿无齿无齿无齿无齿无齿无齿无齿无齿无齿无齿无齿无齿无齿无齿无齿无齿。阿利奎姆·拉奥里特·拉奥里特·厄洛斯，在《真理的元素》中。佩伦茨克在purus efficitur mattis酒后驾车。在会议期间，弗林斯利亚家族的成员都会出席会议，他们也会出席会议。莱奥，这是一句名言，莫利斯在内克。
马克西姆斯、康涅狄格、亨德雷特·马萨、埃吉特·埃利芬德·奥古斯·尼西·埃吉特·厄罗斯。这是一辆汽车。这是一种智慧，它是前庭的一部分
let {scrollTop, scrollHeight} = e.currentTarget, 
height = +getComputedStyle(e.currentTarget)["height"].slice(0,-2);

...
height = +getComputedStyle(e.currentTarget)["height"].replace(/\D/g, "");