css -::webkit-scrollbar 不会删除 chrome 中的滚动条

Question

我加了

.page-content::webkit-scrollbar {
        display: none;
 }

但是 .page-content 在某些 chrome 浏览器中仍然显示滚动条。好像它适用于 mac 但不适用于 windows。知道为什么吗？

Answer 1

这不是一个完美的解决方案，而是一个 hack

You can set a wrapper around .page-content which is #container1 in below example and then on .page-content set some padding 15px like the width of scroll to hide it.

*{margin:0;}
#container1{
    height: 100%;
    width: 100%;
    border: 1px solid green;
    overflow: hidden;
}

#container2{
    width: 100%;
    height: 99%;
    border: 1px solid blue;
    overflow: auto;
    padding-right: 15px;
}

html, body{
    height: 99%;
    border: 1px solid red;
    overflow:hidden;
}

<div id="container1"><div id="container2">
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    good<br/>bye.
</div><div>