滚动条设置超出部分隐藏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>滚动条设置 超出部分隐藏</title>
    </head>
    <style type="text/css">
        #box {
            width: 500px;
            height: 300px;
            overflow-x: hidden;
            overflow-y: scroll;
            line-height: 30px;
            text-align: center;
        }

        #box::-webkit-scrollbar {
            display: none;
        }
    </style>
    <body>
        <!-- 兼容所有浏览器的超出部分滚动不显示滚动条 -->
        <div id="box">
            你好 </br>你好 </br>
            你好 </br>你好 </br>
            你好 </br>你好 </br>
            你好 </br>你好 </br>
            你好 </br>你好 </br>
            你好 </br>你好 </br>
            你好 </br>你好 </br>
            你好 </br>你好 </br>
            你好 </br>你好 </br>
            你好 </br>你好 </br>
            你好 </br>你好 </br>
            你好 </br>你好 </br>
            你好 </br>你好 </br>
            你好 </br>你好 </br>
            你好 </br>你好 </br>
            你好 </br>你好 </br>
            你好 </br>你好 </br>
            你好 </br>你好 </br>
            你好 </br>你好 </br>
            你好 </br>你好 </br>
            你好 </br>你好 </br>
        </div>
        <script type="text/javascript">
        </script>
    </body>
</html>