滚动条高度公式不起作用

Question

I'm trying to build a custom scrollbar. I got stuck calculating the correct height for the scrollbar thumb. I did what this comment said to do (and other places I checked said the same formula):

scrollbarArea.offsetHeight * container.offsetHeight / content.scrollHeight

I did the same thing, but the scrollbars thumb is smaller than expected. How can I get the scrollbars thumb to be a regular height based on the height, and scrollHeight?

JSFiddle

 console.clear(); var innerWrapper = document.getElementById('innerWrapper'); var scrollBarThumb = document.getElementById('scrollbar_thumb'); scrollBarThumb.style.height = (2 * innerWrapper.scrollHeight / innerWrapper.scrollHeight) + 'px'; console.log(innerWrapper.scrollHeight, innerWrapper.offsetHeight); 

 #outerWrapper { height: 500px; display: flex; background-color: burlywood; } #content { width: 400px; } #scrollbar { height: 100%; width: 50px; background-color: orange; } #scrollbar_thumb { background-color: blue; } 

 <div id="outerWrapper"> <div id="innerWrapper"> <div id="content"> Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero </div> </div> <div id="scrollbar"> <div id="scrollbar_thumb"></div> </div> </div> 

Answer 1

To get the formula you have stated you desire:

scrollbarArea.offsetHeight * container.offsetHeight / content.scrollHeight

You could use either

scrollBarThumb.style.height = (Math.pow(innerWrapper.offsetHeight,2)/ innerWrapper.scrollHeight) + 'px';

or

var scrollBarArea = document.getElementById('scrollbar');
scrollBarThumb.style.height = (scrollBarArea.offsetHeight * innerWrapper.offsetHeight / innerWrapper.scrollHeight) + 'px';

Full code:

 console.clear(); var innerWrapper = document.getElementById('innerWrapper'); var scrollBarArea = document.getElementById('scrollbar'); var scrollBarThumb = document.getElementById('scrollbar_thumb'); //Target formula: //scrollbarArea.offsetHeight * container.offsetHeight / content.scrollHeight //Either scrollBarThumb.style.height = (scrollBarArea.offsetHeight * innerWrapper.offsetHeight / innerWrapper.scrollHeight) + 'px'; //or //scrollBarThumb.style.height = (Math.pow(innerWrapper.offsetHeight,2)/ innerWrapper.scrollHeight) + 'px'; console.log(innerWrapper.scrollHeight, innerWrapper.offsetHeight); 

 #outerWrapper { height: 500px; display: flex; background-color: burlywood; } #content { width: 400px; } #scrollbar { height: 100%; width: 50px; background-color: orange; } #scrollbar_thumb { background-color: blue; } 

 <div id="outerWrapper"> <div id="innerWrapper"> <div id="content"> Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero </div> </div> <div id="scrollbar"> <div id="scrollbar_thumb"></div> </div> </div>