New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

scroll - 奇怪的原生滚动条 #15

Open

workkk98 opened this issue Apr 2, 2021 · 0 comments

Owner

workkk98 commented Apr 2, 2021

前提：一般来说原生的滚动条的高度是17px。

那么下面代码中的滚动容器的高度是多少？

    <div style="overflow: hidden;height: 200px;">
        <div style="overflow: scroll;height: 100%;"></div>
    </div>

这个高度实际上是183px。我们都知道滚动条出现的地方是border和padding的交界处。这少掉的17px就是滚动条的宽度。

如何隐藏滚动条？

就如上面的html文件，利用好这个overflow: hidden属性。将子元素的滚动条溢出父元素box就行了。
水平的直接用margin-right: -17px。

可是垂直方向却不起作用？这是因为我们用了height: 100%,这就导致margin-bottom失效了。

换种思路，将height设置为calc(100% + 17px)不就行了吗

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment