Member Avatar for webdevstudent

How can I use in my website? I tried all the possible css settings to my knowlegde but still it is not replacing browser scroll bar with custom one.

And is ther anything else I can use instead? which has smooth scrolling and custom styling options.

  • 2 Contributors
  • 3 Replies
  • 96 Views
  • 21 Hours Discussion Span
  • Latest Post Latest Post by webdevstudent

Dani AI

Generated

Short summary and practical next steps (builds on 's point): the kind of plugins you tried typically attach a styled scrollbar to a scrollable element (a div), they do not replace the browser chrome itself. To get a full-page custom/“smooth” scroll you must either (A) let the browser keep native scrolling and add smooth behavior, or (B) move all page content into a full-height scrollable wrapper and initialize the plugin on that wrapper. Both approaches have trade-offs for accessibility and mobile touch behavior.

Quick checklist to troubleshoot why a plugin "does not work":

  • Confirm the plugin script is loaded after jQuery and initialization runs after DOM ready.
  • Verify the target element actually scrolls by itself (give it an explicit height or use height:100vh) and overflow:auto so the plugin has something to enhance.
  • Temporarily remove other CSS (overflow:hidden, position rules, z-index) that can block the custom bar.
  • Check the console for JS errors and confirm the plugin supports the jQuery version in use.
  • On iOS enable momentum with -webkit-overflow-scrolling: touch on the scroll container when using native-like scrolling.

Alternative libraries (actively maintained) and a short note:

  • SimpleBar — lightweight, works by wrapping elements, minimal visual chrome.
  • OverlayScrollbars — very configurable and themeable.
  • smooth-scrollbar — provides momentum/smooth physics.
    For a coverflow/Android-gallery look try sliders with a coverflow effect such as Swiper.

Accessibility and final cautions: replacing native scroll can break keyboard scrolling, focus handling, and screen-reader expectations. Prefer progressive enhancement: provide a working native fallback, test keyboard/tab behavior, and only use a full-page wrapper if necessary.

Example minimal wrapper pattern:

<!-- HTML -->
<div id="page-wrap">...all page content...</div>

<!-- CSS -->
html,body,#page-wrap {height:100%;margin:0;}
#page-wrap {overflow:auto;-webkit-overflow-scrolling:touch;}

<!-- JS -->
// initialize your chosen scrollbar on '#page-wrap' after DOM ready

Recommended Answers

All 3 Replies

Member Avatar for JorgeM

How can I use this plugin in my website? I tried all the possible css settings to my knowlegde but still it is not replacing browser scroll bar with custom one

What do you mean CSS? I took a look at the site, and the download and instructions provided seem to include a javascript file and that's about it.

Options on how to use it (from example on site...)

$('.box_4').vertiscroll({
 animate:1200,
 mousemove:true,
 width:18,
 radius:9,
 color:'#ccc'
});

So, it appears that this plugin will simply add a scroll bar to an element such as a div. Are you trying to replace the scrollbar that is included with the browser on the right side? Doesnt look like this plugin is for that purpose.

Member Avatar for webdevstudent

Yes Iwant smooth scrolling on website after searching for hours i found this but I was not able to make it work the way I want. Can you please suggest me any plugin that will help me to accomplish it?

And I was also searching for the jQuery effect which I saw last month(like in android gallary where images go down like slope on one side) but I dnt know what is the name of that effect,

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.