Scroll bar

by Kiran Duggal

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.0/jquery.nicescroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.0/jquery.nicescroll.js"></script>
<div id="pageData" class="style-3">
    <div>
        <a href="http://www.phpgang.com/?p=294" target="_blank">How to Integrate jQuery Scroll Paging with PHP</a>
    </div><br>
    <div>
        <a href="http://www.phpgang.com/?p=298" target="_blank">How to Crop Image with jQuery and PHP</a>
    </div><br>
    <div>
        <a href="http://www.phpgang.com/?p=301" target="_blank">How to block Inappropriate content with javascript validation</a>
    </div><br>
    <div>
        <a href="http://www.phpgang.com/?p=304" target="_blank">How to Mask an input box in jQuery</a>
    </div><br>
    <div>
        <a href="http://www.phpgang.com/?p=290" target="_blank">How to implement jquery Timeago with php</a>
    </div><br>
    <div>
        <a href="http://www.phpgang.com/?p=309" target="_blank">How to Integrate live search in PHP and MySQL with jQuery</a>
    </div><br>
    <div>
        <a href="http://www.phpgang.com/?p=312" target="_blank">How to Resize text using jQuery</a>
    </div>
    <div>
        <a href="http://www.phpgang.com/?p=294" target="_blank">How to Integrate jQuery Scroll Paging with PHP</a>
    </div><br>
    <div>
        <a href="http://www.phpgang.com/?p=298" target="_blank">How to Crop Image with jQuery and PHP</a>
    </div><br>
    <div>
        <a href="http://www.phpgang.com/?p=301" target="_blank">How to block Inappropriate content with javascript validation</a>
    </div><br>
    <div>
        <a href="http://www.phpgang.com/?p=304" target="_blank">How to Mask an input box in jQuery</a>
    </div><br>
    <div>
        <a href="http://www.phpgang.com/?p=290" target="_blank">How to implement jquery Timeago with php</a>
    </div><br>
    <div>
        <a href="http://www.phpgang.com/?p=309" target="_blank">How to Integrate...

CSS

#pageData
{
    height:300px; 
    overflow:scroll; 
    width:450px; 
    border:1px blue dashed; 
    margin:0 auto; 
    margin-top:80px; 
    margin-bottom:11px;
    padding: 10px;
}
#box2000 > div
{
    -webkit-transition: width 0.2s ease; 
    -moz-transition: width 0.2s ease; 
    -o-transition: width 0.2s ease; 
    -ms-transition: width 0.2s ease;     
    transition: width 0.2s ease; 
}
#box2000 > div:hover
{
    width:120%!important;
    cursor:pointer;
}


.style-3::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

.style-3::-webkit-scrollbar
{
	width: 6px;
	background-color: #F5F5F5;
}

.style-3::-webkit-scrollbar-thumb
{
	background-color: #000000;
}

JavaScript

$(document).ready(function () {
    $("#pageData").niceScroll({ autohidemode: true })
    });