Problem with dynamic elements

[stalniy]

For examples, I have a one page application. Apply lionscrollbar to empty dom element. Then add some html to it's content.

Expected result: lionbars scrollbars are shown

Actual result: standard os scrollbars are shown

Example:

<div id="scrollbar" style="height:50px; width: 50px;font-size:36px"></div>
<script>
$('#scrollbar').lionbars({
   autohide: true,
   reachBottom: function () {alert(true) }
});

setTimeout(function() {
$('#scrollbar').html('<div>SOME DOM ELEMENTS</div><div>SOME DOM ELEMENTS</div>');
}, 5000);
</script>

[stalniy]

To figure out when dom html is updated you can rewrite jQuery.fn.domManip method in such way:

jQuery.fn.domManip = (function (fn){
  return function () {
     var result = fn.apply(this, arguments);
     // this === jQuery Collection
     // here you can check elements size and make decision if you have to add lionbars
     return result;
  }
})(jQuery.fn.domManip)

[stalniy]

Also as alternative, for autohide = true, you can rebuild all scrollbar properties (width for wrappers, ratios, etc.) on mouse over and drop them on mouse leave after scrollbars become hidden.