jQuery Scrollbar on window resize not working

Question

I am using jquery scrollbar plugin for my website. Everything is working good. But when I resize window in mozilla and make scroll div and resize again its looks uneven scrollbar.

How to make the custom scrollbar will be visible if the browser resize also.

script I have tried:

$('.scroll-lmenu').scrollbar({
    autoUpdate :true,
    autoScrollSize: true
});

 $(document).ready(function(){ $('.scrollbar-inner').scrollbar(); });

 .scrollbar-inner { max-height: 300px; overflow: auto; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://gromo.github.io/jquery.scrollbar/jquery.scrollbar.js"></script> <link href="https://gromo.github.io/jquery.scrollbar/jquery.scrollbar.css" rel="stylesheet"/> <div class="scrollbar-inner"> <p class="permanent"> Simple inner scrollbar over content </p> <p class="permanent"> <a href="#anchor">Click to test #anchors</a><br><br> <input type="text" value="Use TAB to focus next input" style="max-width:220px; width: 100%;"> </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat. </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat. </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat. </p> <input type="text"><br> <h3 id="anchor">Anchor</h3> </div>

Answer 1

Mozilla does have some extensions for manipulating the scroll-bars but they are all recommended not to be used.

-moz-scrollbars-none They recommend using overflow:hidden in place of this.

-moz-scrollbars-horizontal Similar to overflow-x

-moz-scrollbars-vertical Similar to overflow-y

-moz-hidden-unscrollable Only works internally within a users profile settings. Disables scrolling XML root elements and disables using arrow keys and mouse wheel to scroll web pages.

Mozilla Developer Docs on 'Overflow ' Further details about Mozilla

This is not really useful as far as I know, but it's worth noting that the attribute which controls whether or not scrollbars are displayed in Firefox is: ( reference link )

Attribute: scrollbars

Type: nsIDOMBarProp

Description: The object that controls whether or not scrollbars are shown in the window. This attribute is "replaceable" in JavaScript. Read only

Last but not least, padding is like magic.

As has been previously mentioned in some other answers, here is an illustration which is sufficiently self-explanatory

Answer 2

That was you body's scroll bar disable the body's overflow-y .

 $(document).ready(function(){ $('.scrollbar-inner').scrollbar(); });

 .scrollbar-inner { max-height: 300px; overflow: auto; } body{ overflow:hidden; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://gromo.github.io/jquery.scrollbar/jquery.scrollbar.js"></script> <link href="https://gromo.github.io/jquery.scrollbar/jquery.scrollbar.css" rel="stylesheet"/> <div class="scrollbar-inner"> <p class="permanent"> Simple inner scrollbar over content </p> <p class="permanent"> <a href="#anchor">Click to test #anchors</a><br><br> <input type="text" value="Use TAB to focus next input" style="max-width:220px; width: 100%;"> </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat. </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat. </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat. </p> <input type="text"><br> <h3 id="anchor">Anchor</h3> </div>

Use overflow-x: scroll and overflow-y: hidden , or overflow: hidden scroll instead.
Link To developer.mozilla.org

Answer 3

You can add max-height:100vh and remove body margin margin:0

 $(document).ready(function() { $('.scrollbar-inner').scrollbar(); });

 body { margin: 0 } .scrollbar-inner { max-height: 100vh; overflow: auto; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://gromo.github.io/jquery.scrollbar/jquery.scrollbar.js"></script> <link href="https://gromo.github.io/jquery.scrollbar/jquery.scrollbar.css" rel="stylesheet" /> <div class="scrollbar-inner"> <p class="permanent"> Simple inner scrollbar over content </p> <p class="permanent"> <a href="#anchor">Click to test #anchors</a><br><br> <input type="text" value="Use TAB to focus next input" style="max-width:220px; width: 100%;"> </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat. </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat. </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat. </p> <input type="text"><br> <h3 id="anchor">Anchor</h3> </div>

Answer 4

body {
  margin: 0
}

.scrollbar-inner {
  max-height: 100vh;
  overflow: overflow-x ;
}

Answer 5

您可以通过以下方式直接隐藏滚动条

.scrollbar-inner > .scroll-element{ display:none;}

Answer 6

Try not Using

$(document).ready(function(){
$('.scrollbar-inner').scrollbar();

});

https://codepen.io/sheetalsinghwd/pen/povoYbv

like this

Answer 7

try adding the following to document ready

    $(".scrollbar-inner").hover(function() {            
      $("body").css("overflowY", "hidden");
    });

    $(".scrollbar-inner").mouseleave(function() {            
      $("body").css("overflowY", "auto");
    });