如何應用document.height/window.height比例從1到100的比例。

我想使用兩個高度爲110px和10px的div創建滾動條。最小的一個在最高的一個裏面。這給了我空間，將較小的邊緣高度從0改爲100px，並且它仍然適合較高的一個。如何應用document.height/window.height比例從1到100的比例。

如果你想知道，在0至100像素就是我對這個問題的標題意味着從1的規模適配到100

我想現在要做的，是要弄清楚如何計算這個比例使我的10px高度位置與高度div相關，與window.height的document.height比例成正比。

我一直在嘗試整夜，但沒有任何功能。以下是我的一些代碼，但我正在刪除所有與我在此提問有關的所有內容，因爲我想聽到純粹的想法。

請指教。

var wheight = $(window).height(); 
var dheight = $(document).height(); 
document.getElementById("wheight").innerHTML=wheight; 
document.getElementById("dheight").innerHTML=dheight; 
document.getElementById("sidescrollbtn").style.marginTop = '70px';

http://jsfiddle.net/vinicius5581/2y63xnxa/4/

來源

2014-09-19 Vinicius Santana

我不是尕斯庫勒我明白你的目標......但是你可以看看相關的視口單位（'大衆，VH，最小值，vmax'）HTTPS ：//developer.mozilla.org/en-US/docs/Web/CSS/length#Viewport-percentage_lengths – 2014-09-19 11:53:25

我不確定是否誠實。我想讓該滾動條與文檔滾動的頂部和底部匹配。我瞭解到底部位置應該與document.height - window.height等效。仍然在這裏探索。感謝您的鏈接。非常豐富。 – 2014-09-19 12:09:08

計算的百分比是相當容易的。然後將百分比縮放到滾動條的大小是微不足道的。

 var offset = $(window).scrollTop(); 
     $(window).scrollTop(offset + 20); 
     var wheight = $(window).height(); 
     var dheight = $(document).height(); 

     //yep, this is all there is to it. 
     var percentualOffset = (offset/wheight) * 100; 

     //or use dheight. i'm not sure which applies to you 
     //var percentualOffset = (offset/dheight) * 100; 

     $("#sidescrollbtn").css("top", percentualOffset);

的工作落實，見http://jsfiddle.net/2y63xnxa/9/

來源

2014-09-19 13:24:55

儘管如此，你仍然還有其他一些東西。 – 2014-09-19 13:25:57

如何應用document.height/window.height比例從1到100的比例。

回答

相關問題