鍍金池/ 問答/網(wǎng)絡安全  HTML/ 求一段計算滾動條滾動了百分之多少的代碼,需要原生js 的,哪位大佬幫忙寫一下謝謝

求一段計算滾動條滾動了百分之多少的代碼,需要原生js 的,哪位大佬幫忙寫一下謝謝

這里是 jquery 實現(xiàn)的

我需要使用原生的代碼, 給個函數(shù).在 vue 使用的, 或者有類似的插件也歡迎推薦下

回答
編輯回答
愛是癌

1.給該區(qū)域加個ref屬性，使用this.$refs.refName獲取該區(qū)域；
2.獲取該區(qū)域的高度；
3.監(jiān)聽該區(qū)域滾動事件，獲取該區(qū)域的scrollTop數(shù)值（this.$refs.refName..addEventListener('scroll', function() {})）
4.與高度進行計算，計算出百分比，設置個data存儲這變量實時顯示

2017年5月23日 21:13
編輯回答
兔囡囡

scrollTop + clientHeight = offsetHeight

2018年2月7日 22:15
編輯回答
影魅

這樣

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

el是你想要進行計算的元素

2017年9月16日 08:23
編輯回答
兔寶寶

需要通過js來監(jiān)聽瀏覽器滾動的距離，當滾動到多少距離的時候，我們來設置div的position參數(shù)。

<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">
 內(nèi)容
</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

2017年12月26日 18:19
編輯回答
愚念
// 頁面總高
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)
})
2018年7月31日 14:45