Scroll - Enscroll() Plugin
HTML
<script src="http://enscrollplugin.com/releases/enscroll-0.3.0.min.js"></script>
<div class="scrollbox">
</div>
<button class="addrow">add row</button>
<button class="scrollToBottom">Scroll To Bottom</button>
CSS
.scrollbox {
/* Start writing your markup with this style */
width: 315px; /* The dimensions of your content pane */
height: 350px;
border: 1px solid #b7b7b7;
padding: 0 5px;
}
.vertical-track {
width: 16px; /* The width of the scrollbar */
background-color: #aaa; /* The color of the scrollbar track*/
}
.vertical-handle {
width: 100%;
background-color: #000; /* The color of the scrollbar handle */
}
JavaScript
/*
* Press Ctrl+Shift+Up to hide the left sidebar!
*
*/
var newline = '<table><tr><td>jzehfz</td><td>uhzuifgjnsdfnjdsnvnjnsdfjvjsnfjvnjsdjdbskbfkbfbskfksfhgbhbfksbhdfkkbaskdbfkbskfksbfkbskfeizfiyegfizgei</td></tr></table>';
$('.addrow').on('click', function() {
$('.scrollbox').append(newline);
});
$('.scrollbox').enscroll(
{
showOnhover:true,
verticalScrollerSide:"right",
horizontalScrolling:false
});
$('.scrollToBottom').on('click', function() {
$(".scrollbox").scrollTop($(".scrollbox")[0].scrollHeight);
});