.scroltable-wrapper {position: relative; } .scroltable-container {overflow: auto; -webkit-overflow-scrolling: touch; -webkit-transform: translate3d(0, 0, 0); } .scroltable-nav {display: none; position: absolute; width: 60px; height: 100%; cursor: pointer; } .scroltable-nav.scroltable-nav-left {left: 0; z-index: 99; background: url(images/arrow-left.png) no-repeat 10px center, -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0), #fff); background: url(images/arrow-left.png) no-repeat 10px center, -moz-linear-gradient(to left, rgba(255, 255, 255, 0), #fff); background: url(images/arrow-left.png) no-repeat 10px center, -ms-linear-gradient(to left, rgba(255, 255, 255, 0), #fff); background: url(images/arrow-left.png) no-repeat 10px center, -o-linear-gradient(to left, rgba(255, 255, 255, 0), #fff); background: url(images/arrow-left.png) no-repeat 10px center, linear-gradient(to left, rgba(255, 255, 255, 0), #fff); } .scroltable-nav.scroltable-nav-right {right: 0; z-index: 99; background: url(images/arrow-right.png) no-repeat right 10px center, -webkit-linear-gradient(0, rgba(255, 255, 255, 0), #fff); background: url(images/arrow-right.png) no-repeat right 10px center, -moz-linear-gradient(to right, rgba(255, 255, 255, 0), #fff); background: url(images/arrow-right.png) no-repeat right 10px center, -ms-linear-gradient(to right, rgba(255, 255, 255, 0), #fff); background: url(images/arrow-right.png) no-repeat right 10px center, -o-linear-gradient(to right, rgba(255, 255, 255, 0), #fff); background: url(images/arrow-right.png) no-repeat right 10px center, linear-gradient(to right, rgba(255, 255, 255, 0), #fff); }