在另一个div中滚动div

Question

I want to add scrolling to the second part, it is "chat-messages" div in "chat-bar" div. I want JUST this "chat-messages" to make scrollable, leaving rest of the site with no any scrool. At this moment I have to scroll the whole site to see "input-row" div. It's quite working when i set overflow: auto to the "chat-bar" but then whole input-row is also included in scrolling. Please give me best css/html option how to resolve this problem, or give me simple javascript library.

jsfiddle link:

jsfiddle.net/o9vmfgpx/3

edit: I made it working, but in some hacky way.

.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%;
    }
}

Works on latest version of IE, EDGE, Chrome, Firefox and Opera (as 10.14.2016)

Answer 1

This should work.

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

Answer 2

Try this.

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

Answer 3

Try adding the below css?

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