(function (n, t) { function u(n) { n.hasOwnProperty("data-simple-scrollbar") || Object.defineProperty(n, "data-simple-scrollbar", new SimpleScrollbar(n)) } function e(n, i) { function f(n) { var t = n.pageY - u; u = n.pageY; r(function () { i.el.scrollTop += t / i.scrollRatio }) } function e() { n.classList.remove("sc-grabbed"); t.body.classList.remove("sc-grabbed"); t.removeEventListener("mousemove", f); t.removeEventListener("mouseup", e) } var u; n.addEventListener("mousedown", function (i) { return u = i.pageY, n.classList.add("sc-grabbed"), t.body.classList.add("sc-grabbed"), t.addEventListener("mousemove", f), t.addEventListener("mouseup", e), !1 }) } function i(n) { for (this.target = n, this.bar = '<div class="sc-scroll">', this.wrapper = t.createElement("div"), this.wrapper.setAttribute("class", "sc-wrapper"), this.el = t.createElement("div"), this.el.setAttribute("class", "sc-content"), this.wrapper.appendChild(this.el); this.target.firstChild;)this.el.appendChild(this.target.firstChild); this.target.appendChild(this.wrapper); this.target.insertAdjacentHTML("beforeend", this.bar); this.bar = this.target.lastChild; e(this.bar, this); this.moveBar(); this.el.addEventListener("scroll", this.moveBar.bind(this)); this.el.addEventListener("mouseenter", this.moveBar.bind(this)); this.target.classList.add("sc-container") } function f() { for (var i = t.querySelectorAll("*[sc-container]"), n = 0; n < i.length; n++)u(i[n]) } var r = n.requestAnimationFrame || n.setImmediate || function (n) { return setTimeout(n, 0) }; i.prototype = { moveBar: function () { var t = this.el.scrollHeight, i = this.el.clientHeight, n = this; this.scrollRatio = i / t; r(function () { n.bar.style.cssText = "height:" + i / t * 100 + "%; top:" + n.el.scrollTop / t * 100 + "%;right:-" + (n.target.clientWidth - n.bar.clientWidth) + "px;" }) } }; t.addEventListener("DOMContentLoaded", f); i.initEl = u; i.initAll = f; n.SimpleScrollbar = i })(window, document)
/* custom scrollbar */
.sc-wrapper {
overflow : hidden;
height : 100%;
position : relative;
z-index : 1;
float: left;
}
.sc-content {
height : 100%;
width : 100%;
padding : 0 32px 0 0;
position : relative;
right : -18px;
overflow : auto;
-moz-box-sizing : border-box;
box-sizing : border-box;
}
.sc-scroll {
position : relative;
background : rgba(0, 0, 0, .1);
width : 9px;
border-radius : 4px;
top : 0;
z-index : 2;
cursor : pointer;
opacity: 0;
transition: opacity 0.25s linear;
}
.sc-container:hover .sc-scroll {
opacity: 1;
}
.sc-grabbed {
user-select: none;
-o-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
}
.msg-page {
height: 500px;
width: 400px;
}
<div class="container">
<div class="msg-page" sc-container>
test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>test test <br/>
</div>
</div>