求一段计算滚动条滚动了百分之多少的代码,需要原生js 的,哪位大佬帮忙写一下谢谢

Question

这里是 jquery 实现的

我需要使用原生的代码, 给个函数.在 vue 使用的, 或者有类似的插件也欢迎推荐下

Answer 1

// 页面总高
var totalH = document.body.scrollHeight || document.documentElement.scrollHeight

// 可视高
var clientH = window.innerHeight || document.documentElement.clientHeight


window.addEventListener('scroll', function(e){
    // 计算有效高
    var validH = totalH - clientH

    // 滚动条卷去高度
    var scrollH = document.body.scrollTop || document.documentElement.scrollTop

    // 百分比
    var result = (scrollH/validH*100).toFixed(2)
    console.log(result)
})

Answer 2

1.给该区域加个ref属性，使用this.$refs.refName获取该区域；
2.获取该区域的高度；
3.监听该区域滚动事件，获取该区域的scrollTop数值（this.$refs.refName..addEventListener('scroll', function() {})）
4.与高度进行计算，计算出百分比，设置个data存储这变量实时显示

Answer 3

这样

let scrollPoint = el.scrollHeight/(el.clientHeight/2);

el是你想要进行计算的元素

Answer 4

需要通过js来监听浏览器滚动的距离，当滚动到多少距离的时候，我们来设置div的position参数。

<style>
*{
 margin: 0;padding: 0;
}
body{
 height: 1500px;
}
.demo{
 position: relative;left: 10px;top: 10px;z-index:9;width: 500px;height: 200px;background: #F0AD4E;
}
</style>
//html
<p style="height: 100px;">测试</p>
<div class="demo" id="demo">
 内容
</div>

js中代码：

function onscroll(distance){//s滚动的距离，offset默认为元素距离顶部的距离    
    var s = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
        dom = document.getElementById('demo'),
        offset= dom.offsetTop || distance;
    dom.style.position=s>offset?"fixed":"relative";
};
window.addEventListener('scroll',onscroll());

来源：fly63.com

Answer 5

scrollTop + clientHeight = offsetHeight