如何减小滚动条的范围空间与div高度不同？

Question

我想调整滚动条移动的空间。 我不希望它影响我可以滚动多少。 请看下面的图片（我的图纸），以便更好地理解我的意思。

我正在使用chrome，因此webkit是可行的。

感谢您的所有答案！

（P.S。我很想减小图像尺寸，但我不知道该怎么做！我的道歉！）。

Answer 1

如果没有嵌套另一个元素并使用其高度，您只需使用巨大的border-bottom并使用outline属性在元素周围放置一个可见边框，例如

div {
  width: 200px;
  height: 300px;
  outline: 1px #9bc solid;
  border-bottom: 50px transparent solid;
}

  

Codepen demo

<强>结果

Answer 2

您无法更改滚动条的高度，但您可以使用-webkit-scrollbar重新设计滚动条，如下所示：

    ::-webkit-scrollbar {
        width: 5px;
        height: 10px;
        background: transparent;

    }

    ::-webkit-scrollbar-thumb {
        background-color: #808080;
    }