CSS customized scroll bar in div

    |
  • Added:
  • |
  • In: Wordpress

How can I customize a scroll bar via CSS (Cascading Style Sheets) for one div and not the whole page?

This Question Has 14 Answeres | Orginal Question | HarisDevel

Or use somthing like this:

var MiniScroll=function(a,b){function e(){c.scrollUpdate()}function f(){var a=new Date,b=Math.abs(a-c.animation.frame),d=c.countScrollHeight();c.animation.frame=a,c.render(b),d.height!=c.controls.height&&(e(),c.controls.height=d.height),requestAnimationFrame(f)}function g(){c.scrollUpdate()}function h(a){var b=c.target.scrollTop,d=Math.abs(a.wheelDeltaY/(10-c.speed));c.target.scrollTop=a.wheelDeltaY>0?b-d:b+d,c.scrollUpdate()}function i(a){if(a.target.classList.contains("scroll"))return a.preventDefault(),!1;var b=c.countScrollHeight();c.target.scrollTop=a.offsetY*b.mul-parseInt(b.height)/2,c.scrollUpdate()}b=b||{};var c=this,d={speed:"speed"in b?b.speed:7};this.target=document.querySelector(a),this.animation={frame:new Date,stack:[]},this.identity="scroll"+parseInt(1e5*Math.random()),this.controls={place:null,scroll:null,height:0},this.speed=d.speed,this.target.style.overflow="hidden",this.draw(),requestAnimationFrame(f),this.target.onscroll=g,this.target.addEventListener("wheel",h),this.controls.place.onclick=i};MiniScroll.prototype.scrollUpdate=function(){this.controls.place.style.height=this.target.offsetHeight+"px";var a=this.countScrollHeight();this.controls.scroll.style.height=a.height,this.controls.scroll.style.top=a.top},MiniScroll.prototype.countScrollHeight=function(){for(var a=this.target.childNodes,b=parseInt(this.target.offsetHeight),c=0,d=0;d<a.length;d++)a[d].id!=this.identity&&(c+=parseInt(a[d].offsetHeight)||0);var e=this.target.offsetHeight*parseFloat(1/(parseFloat(c)/this.target.offsetHeight)),f=this.controls.place.offsetHeight*(this.target.scrollTop/c)+"px";return{mul:c/this.target.offsetHeight,height:e>b?b+"px":e+"px",top:f}},MiniScroll.prototype.draw=function(){var a=document.createElement("div"),b=document.createElement("div");a.className="scroll-place",b.className="scroll",a.appendChild(b),a.id=this.identity,this.controls.place=a,this.controls.scroll=b,this.target.insertBefore(a,this.target.querySelector("*")),this.scrollUpdate()},MiniScroll.prototype.render=function(a){for(var b=0;b<this.animation.stack.length;b++){var c=this.animation.stack[b],d=parseInt(c.target);c.element.style[c.prop]=d+c.points}}; 

And initialize:

<body onload="new MiniScroll(this);"></body> 

And customize:

.scroll-place { // ... // } .scroll { // ... // } 

Like many people, I was looking for something that was:

  • Consistently styled and functional across most modern browsers
  • Not some ridiculous 3000-line bloated jQuery extension cr*p

...But alas - nothing!

Well if a job's worth doing... I was able to get something up and running in about 30 mins. Disclaimer: there's quite a few known (and probably a few as yet unknown) problems with it, but it makes me wonder what on Earth the other 2920 lines of JS are there for in many offerings!

var dragParams; window.addEventListener('load', init_myscroll); /* TODO: Much to do for v axis! */ function bardrag_mousemove(e) { var pos = (e.clientX - dragParams.clientX) + dragParams.offsetLeft; pos = Math.min(Math.max(0, pos), dragParams.maxLeft); dragParams.slider.style.left = pos + 'px'; updateScrollPosition(dragParams.slider, pos); } function updateScrollPosition(slider, offsetVal) { var bar = slider.parentNode; var myscroll = bar.parentNode; var maxView = myscroll.scrollWidth - myscroll.offsetWidth; var maxSlide = bar.offsetWidth - slider.offsetWidth; var viewX = maxView * offsetVal / maxSlide; myscroll.scrollLeft = viewX; bar.style.left = viewX + 'px'; } function drag_start(e) { var slider = e.target; var maxLeft = slider.parentNode.offsetWidth - slider.offsetWidth; dragParams = { clientX: e.clientX, offsetLeft: slider.offsetLeft, slider: e.target, maxLeft: maxLeft }; e.preventDefault(); document.addEventListener('mousemove', bardrag_mousemove); } function drag_end(e) { e.stopPropagation(); document.removeEventListener('mousemove', bardrag_mousemove); } function bar_clicked(e) { var bar = e.target; var slider = bar.getElementsByClassName('slider')[0]; if (bar.className == 'h bar') { var maxSlide = bar.offsetWidth - slider.offsetWidth; var sliderX = e.offsetX - (slider.offsetWidth / 2); sliderX = Math.max(0, Math.min(sliderX, maxSlide)); slider.style.left = sliderX + 'px'; updateScrollPosition(slider, sliderX); } } function init_myscroll() { var myscrolls = document.getElementsByClassName('container'); for (var i = 0; i < myscrolls.length; i++) { var myscroll = myscrolls[i]; var style = window.getComputedStyle(myscroll); if (style.overflowY == 'scroll' || (style.overflowY == 'auto' && myscroll.offsetHeight < myscroll.scrollHeight)) { addScroller(false, myscroll); } if (style.overflowX == 'scroll' || (style.overflowX == 'auto' && myscroll.offsetWidth < myscroll.scrollWidth)) { addScroller(true, myscroll); } } } function addScroller(isX, myscroll) { myscroll.className += ' myscroll'; var bar = document.createElement('div'); var slider = document.createElement('div'); var offsetDim = isX ? myscroll.offsetWidth : myscroll.offsetHeight; var scrollDim = isX ? myscroll.scrollWidth : myscroll.scrollHeight; var sliderPx = Math.max(30, (offsetDim * offsetDim / scrollDim)); slider.style.width = 100 * sliderPx / offsetDim + '%'; slider.className = 'slider'; bar.className = isX ? 'h bar' : 'v bar'; bar.appendChild(slider); myscroll.appendChild(bar); bar.addEventListener('click', bar_clicked); slider.addEventListener('mousedown', drag_start); slider.addEventListener('mouseup', drag_end); bar.addEventListener('mouseup', drag_end); document.addEventListener('mouseup', drag_end); }
body { background-color: #66f; } .container { background-color: #fff; width: 50%; margin: auto; overflow: auto; } .container > div:first-of-type { width: 300%; height: 100px; background: linear-gradient(to right, red, yellow); } /* TODO: Much to do for v axis! */ .myscroll { overflow: hidden; position: relative; } .myscroll .bar { background-color: lightgrey; position: absolute; } .myscroll { padding-bottom: 20px; } .myscroll .h { height: 20px; width: 100%; bottom: 0; left: 0; } .myscroll .slider { background-color: grey; position: absolute; } .myscroll .h .slider { height: 100%; }
<div class="container"> <div></div> </div>

Webkit scrollbar doesnt support on most of the browers.

Supports on CHROME

Here is a demo for webkit scrollbar Webkit Scrollbar DEMO

If you are looking for more examples Check this More Examples


Another Method is Jquery Scroll Bar Plugin

It supports on all browsers and easy to apply

Download the plugin from Download Here

How to use and for more options CHECK THIS

DEMO

I tried a lot of JS and CSS scroll's and I found this was very easy to use and tested on IE and Safari and FF and worked fine

AS @thebluefox suggests

Here is how it works

Add the below script to the

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> <script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script> <script type="text/javascript" src="facescroll.js"></script> <script type="text/javascript"> jQuery(function(){ // on page DOM load $('#demo1').alternateScroll(); $('#demo2').alternateScroll({ 'vertical-bar-class': 'styled-v-bar', 'hide-bars': false }); }) </script> 

And this here in the paragraph where you need to scroll

<div id="demo1" style="width:300px; height:250px; padding:8px; resize:both; overflow:scroll"> **Your Paragraph Comes Here** </div> 

For more details visit the plugin page

FaceScroll Custom scrollbar

hope it help's

Here's a webkit example which works for Chrome and Safari:

CSS:

::-webkit-scrollbar { width: 40px; background-color:#4F4F4F; } ::-webkit-scrollbar-button:vertical:increment { height:40px; background-image: url(/Images/Scrollbar/decrement.png); background-size:39px 30px; background-repeat:no-repeat; } ::-webkit-scrollbar-button:vertical:decrement { height:40px; background-image: url(/Images/Scrollbar/increment.png); background-size:39px 30px; background-repeat:no-repeat; } 

Output:

enter image description here

I know I shouldn't advertise, but I have made a small but elegant way to add scrollbars to your content and style it.

Its completely free and you can do with it whatever you want:

you can find it the website (www.customhtmlscroll.com) here

It's extremely simple to implement and it's easy to style.

I hope someone can use it to style their pages.that's what I made it for.

FYI, This is what google uses in some of it's applications since a long time ago. Check in the jsfiddle that if you apply next classes, they somehow hide the scrollbar in chrome but it's still works.

jfk-scrollbar jfk-scrollbar-borderless jfk-scrollbar-dark 

http://jsfiddle.net/ldiaz/76kcuem0/

I just found it usefull to remove the arrows from the scrollbars. as of 2015 it's been used in maps.google.com when searching for places in the list of results in it's material design UI.

I think there is one thing missing in this thread. If you would by any chance want to implement scrolling via plugin, by far the best one in 2014 is Sly.

It is a pure javascript scrollbar, so your scrollbars are controllable and look the same across the various OS's.

It has the best performance and features. No other even comes close. Don't waste time choosing from myriads of halfbaked buggy other libraries.

Custom scroll bars aren't possible with CSS, you'll need some JavaScript magic.

Some browsers support non-spec CSS rules, such as ::-webkit-scrollbar in Webkit but is not ideal since it'll only work in Webkit. IE had something like that too, but I don't think they support it anymore.

I tried a lot of plugins, most of them don't support all browsers, I prefer iScroll and nanoScroller works for all these browsers :

  • IE11 -> IE6
  • IE10 - WP8
  • IE9 - WP7
  • IE Xbox One
  • IE Xbox 360
  • Google Chrome
  • FireFox
  • Opera
  • Safari

But iScroll do not work with touch!

demo iScroll : http://lab.cubiq.org/iscroll/examples/simple/
demo nanoScroller : http://jamesflorentino.github.io/nanoScrollerJS/

Please check this link. Example with working demo

 #style-1::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #F5F5F5; } #style-1::-webkit-scrollbar { width: 12px; background-color: #F5F5F5; } #style-1::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #555; } 

CSS Scroll Bars

I thought it would be helpful to consolidate the latest information on scroll bars, CSS, and browser compatibility.

Scroll Bar CSS Support

Currently, there exists no cross-browser scroll bar CSS styling definitions. The W3C article I mention at the end has the following statement and was recently updated (Fri 10 Oct 2014 03:09:48 PM CEST):

Some browsers (IE, Konqueror) support the non-standard properties 'scrollbar-shadow-color', 'scrollbar-track-color' and others. These properties are illegal: they are neither defined in any CSS specification nor are they marked as proprietary (by prefixing them with "-vendor-")

Microsoft

As others have mentioned, Microsoft supports scroll bar styling (example) but, only for IE8 and above.

Chrome & Safari (webkit)

Similarly, webkit now has its own version:

Firefox (Gecko)

Firefox does not have its own version of scroll bar styles according to this SO answer from Custom CSS Scrollbar for Firefox.

There's no Gecko equivalent to ::-webkit-scrollbar and friends.

You'll have to stick with jQuery.

Plenty of people would like this feature, see:
https://bugzilla.mozilla.org/show_bug.cgi?id=77790

This report is asking for the exact same thing you're asking for: https://bugzilla.mozilla.org/show_bug.cgi?id=547260

Cross-browser Scroll Bar Styling

JavaScript libraries and plug-ins can provide a cross-browser solution. There are many options.

The list could go on. Your best bet is to search around, research, and test the available solutions. I am sure you will be able to find something that will fit your needs.

Prevent Illegal Scroll Bar Styling

Just in case you want to prevent scroll bar styling that hasn't been properly prefixed with "-vendor", this article over at W3C provides some basic instructions. Basically, you'll need to add the following CSS to a user style sheet associated with your browser. These definitions will override invalid scroll bar styling on any page you visit.

body, html { scrollbar-face-color: ThreeDFace !important; scrollbar-shadow-color: ThreeDDarkShadow !important; scrollbar-highlight-color: ThreeDHighlight !important; scrollbar-3dlight-color: ThreeDLightShadow !important; scrollbar-darkshadow-color: ThreeDDarkShadow !important; scrollbar-track-color: Scrollbar !important; scrollbar-arrow-color: ButtonText !important; } 

Duplicate or Similar Questions / Source Not Linked Above

Note: This answer contains information from various sources. If a source was used, then it is also linked in this answer.

Give this a try

Source : http://areaaperta.com/nicescroll/

Simple Implementation

<script type="text/javascript"> $(document).ready( function() { $("html").niceScroll(); } ); </script> 

It is a "pure javascript" scrollbar, so your scrollbars are controllable and look the same across the various OS's.

.className::-webkit-scrollbar { width: 10px; background-color: rgba(0,0,0,0); } .className::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.5); border-radius: 5px; } 

gave me a nice mobile/osx like one.


Search
I am...

Sajjad Hossain

I have five years of experience in web development sector. I love to do amazing projects and share my knowledge with all.

Connect Social With PHPAns
Top