Below is the entire HTML file. Everything you need to know. I have simplified the HTML file to focus on the problem. The problem is that nicescroll's railpadding property does not work. It shows the vertical railbar on the right with padding added only to its left. It does not center the vertical bar if padding is added on both right and left side. For the horizontal scrollbar, padding simply does not work. The padding property's sequence of top, right, left, bottom is different than the general CSS sequence. I wonder if that matters. Nicescroll is otherwise very simple to use and does what I want. I had problems with another scrollbar widget so switched to this one. Any suggestions would be appreciated!
<!DOCTYPE HTML>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<script>
$(document).ready(function () {
$('#nice_div').niceScroll({cursorcolor:'#FF0000', autohidemode:'false',
cursorwidth:4, background:'pink',
railpadding:{top:1,right:2,left:2,bottom:1}});
</script>
<body>
<div id="nice_div" style="width:200px;height:100px;">A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text.
================================================
A lot of text.
A lot of text. A lot of text. A lot of text.
================================================
A lot of text. A lot of text. A lot of text.
A lot of text. A lot of text.
</div>
</body>
</html>