mCustomScrollbar

by Teuta Koraqi

HTML

<script src="http://malihu.github.io/custom-scrollbar/3.0.0/jquery.mCustomScrollbar.concat.min.js"></script>
<link rel="stylesheet" href="http://malihu.github.io/custom-scrollbar/3.0.0/jquery.mCustomScrollbar.min.css">
<div id="person">
  
  I'm going to have a new id
</div>

CSS

.list{
    height: 100px;
    overflow-y: auto;
    overflow-x:  auto;
   
}
.overlay {
    position: fixed;
    opacity: 1;
    visibility: visible;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: rgba(255, 255, 255, .5);
    -webkit-transition: opacity .15s ease-out;
    -moz-transition: opacity .15s ease-out;
    transition: opacity .15s ease-out;
}

.inner-list {
    width: 30%;
    float:left;
    background: lightblue;
    position: relative;
    z-index: 9999;
    overflow: hidden;
}

.question {
      position: absolute;
    right: 120px;
    top: 40px;
}

.row{
    list-style-type: none;
    overflow: hidden;
    width: 200px;
    height: 20px;
}
.row:hover{
    background-color: #E0EBEE;
}

JavaScript

debugger;
var personId = $("#person").attr("id");
$('div#person').attr('id', personId + '_i');