javascript - JQuery to make div customized scroll bar always visible -
i have table content marked div height of 200px. table content user input & dynamic . using jquery modulate scroll bar if use overflow-y: scroll !important; normal scroll appears @ beginning..
if div content crosses 200px height jquery scroll bar appears along normal scroll bar.
what want : want show jquery scroll bar visible irrespective of div height not normal scroll bar shown in below image.
error snapshot:
css:
<style type="text/css"> #boxscroll { height: 200px; width: 230px; overflow-y: scroll !important; } </style>
jquery:
<script src="js/jquery.min.js"></script> <script src="js/jquery.nicescroll.min.js"></script>
download jquery here... https://jquery-nicescroll.googlecode.com/files/jquery.nicescroll.340.zip
<script> $(document).ready(function() { var nicesx = $("#boxscroll").nicescroll({touchbehavior:false,cursorcolor:"#ccc",cursoropacitymax:0.8,cursorwidth:4,autohidemode:false}); }); </script>
html :
<div id="boxscroll"> <table id="itemtable" width="230" border="0" cellspacing="0" cellpadding="0"> ....content goes here.... </table> </div>
<script> $(document).ready(function() { var nicesx = $("#boxscroll").nicescroll({nativeparentscrolling: false,touchbehavior:false,cursorcolor:"#ccc",cursoropacitymax:0.8,cursorwidth:4,autohidemode:false}); }); </script> <style> #boxscroll { height: 200px; width: 230px; overflow-y: hidden; } </style>
this should work.
for displaying scroll bar @ height:
.nicescroll-rails div{ display: inline !important; min-height: 30px; } .nicescroll-rails { display: inline !important; }
Comments
Post a Comment