CODEWITHSUNDEEP
javascriptjqueryhtmlscrollbar
Saravana
Saravana

Reputation: 3496

jQuery Scrollbar on window resize not working

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
});

image

$(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>

Upvotes: 3

Views: 243

Answers (7)

gsaandy
gsaandy

Reputation: 619

try adding the following to document ready

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

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

Upvotes: 0

Tirthak Modi
Tirthak Modi

Reputation: 111

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

enter image description here

Upvotes: 2

Ms Designer
Ms Designer

Reputation: 263

Try not Using 

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

});

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

like this

Upvotes: 0

Ms Designer
Ms Designer

Reputation: 263

You can directly hide the scroll bar by 

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

Upvotes: 0

Ms Designer
Ms Designer

Reputation: 263

body {
  margin: 0
}

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

Upvotes: 0

Jay Ukani
Jay Ukani

Reputation: 442

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>

Upvotes: 0

Ahmed Ali
Ahmed Ali

Reputation: 1966

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

Upvotes: 0

Related Questions