在另一个div中滚动div

Question

我想将滚动添加到第二部分，它是“chat-bar”div中的“chat-messages”div。我希望这个“聊天消息”可以滚动，让网站的其余部分没有任何scrool。此时我必须滚动整个网站才能看到“输入行”div。当我将overflow: auto设置为“聊天栏”时，它非常有效，但整个input-row也包含在滚动中。请给我最好的css / html选项如何解决这个问题，或者给我一个简单的javascript库。

jsfiddle链接：

jsfiddle.net/o9vmfgpx/3

编辑： 我让它工作，但是以一种黑客的方式。

.chat-messages {
    overflow-y: scroll;
    -ms-overflow-style: none;
}
.chat-messages::-webkit-scrollbar {
    display: none;
}

@-moz-document url-prefix() {
    .chat-messages {
        right: -5%;
        padding-right: 3%;
    }
}

适用于最新版本的IE，EDGE，Chrome，Firefox和Opera（作为10.14.2016）

Answer 1

这应该有用。

body {
      overflow:hidden;
}
.chat-messages {
       overflow:scroll !important;
}

Answer 2

试试这个。

.input-row {
    position: fixed;
    bottom: 10px;
    left: 10px;
}

Answer 3

尝试添加以下css？

.chat-messages {
  height:200px;
  overflow:scroll;
}