滚动条高度公式不起作用

Question

我正在尝试构建自定义滚动条。我卡住计算滚动条拇指的正确高度。我做了this comment所说的事情（我检查的其他地方也说了同样的公式）：

scrollbarArea.offsetHeight * container.offsetHeight / content.scrollHeight

我做了同样的事情，但滚动条拇指比预期的要小。如何根据高度和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

为了得到你想要的公式：

scrollbarArea.offsetHeight * container.offsetHeight / content.scrollHeight

您可以使用

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

或

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

完整代码：

＆＃13;

＆＃13;

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);

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;