隐藏可滚动div的滚动条的原因是因为没有给父容器设置高度限制。解决方法是将滚动的元素包裹在一个容器中，并将容器的宽度设置为大于该容器的宽度。

在上述代码中，#chatlist是父容器，设置了宽度为500px，高度为300px，边框为1px黑色实线。为了隐藏滚动条，设置了overflow:hidden。而#chatlist ul是滚动的元素，设置了高度为100%，宽度为520px，overflow-y为scroll。

然而，由于没有给#chatlist设置高度限制，无法隐藏滚动条。解决方法是在滚动的元素外面包裹一个容器，并将容器的宽度设置为大于#chatlist的宽度。

代码如下：

#container {
    width: 520px;
}
#chatlist {
    width: 500px;
    height: 300px;
    border: 1px solid black;
    overflow: hidden;
}
#chatlist ul {
    height: 100%;
    overflow-y: scroll;
}

将滚动的元素包裹在#container中，并将#container的宽度设置为520px。这样就能隐藏滚动条，同时保持#chatlist的高度限制。

隐藏可滚动的div的滚动条是一个常见的需求。在上述代码中，原因是 div 元素的宽度和高度被设置为100%，并且overflow属性被设置为hidden，这意味着当内容超出div元素的尺寸时，将不会显示滚动条。

解决方法是将以下样式应用于容器div和聊天列表div：

#container{
    height: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
}
#chatlist{
    width: 100% !important;
    height: 99% !important;
    overflow: auto !important;
    padding-right: 15px !important;
}

这些样式将容器div的宽度和高度设置为100%，并且将overflow属性设置为hidden，以隐藏滚动条。聊天列表div的宽度设置为100%，高度设置为99%，并且overflow属性设置为auto，以便在内容溢出时显示滚动条。padding-right属性用于保持内容与右侧边缘的间距。

在html和body元素上也应用了一些样式：

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

这些样式将html和body元素的高度设置为99%，并且将overflow属性设置为hidden，以确保整个页面没有滚动条。

但是，以上代码中还有一个问题。在注释中提到，由于应用的设计要求是从墙到墙，不能在左侧或右侧添加任何内边距。所以，移除了padding-right属性后，仍然显示了滚动条。

因此，最终的解决方法是将padding-right属性保留在样式中。这将确保内容与右侧边缘保持一定的间距，并且隐藏滚动条。

隐藏滚动条的原因是想要在具有滚动条的div中隐藏滚动条。解决方法是在CSS中添加以下代码：.element::-webkit-scrollbar { width: 0 !important }，其中.element是具有滚动条的div的类名。

具体信息可以在这个链接中找到更多：http://blogs.msdn.com/b/kurlak/archive/2013/11/03/hiding-vertical-scrollbars-with-pure-css-in-chrome-ie-6-firefox-opera-and-safari.aspx