Friday, 29 November 2019

jQuery Scrollbar on window resize not working

I am using jquery scrollbar plugin for my website. Everything working good. But when I window resize 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>


from jQuery Scrollbar on window resize not working

No comments:

Post a Comment