The Facebook and Twitter have their own scrollbars styles. Are you looking for the same thing? Here is the code which is written in jQuery and CSS. Because of some limitation I’m unable to add Mouse Wheel function in this version. If you want to implement this script in you web application, copy paste the code and edit the width and height in CSS code of the content area. No need to change anything on the script. Default width is 300px and height is 500px.

View Demo

The scroll scrubber height will change when the height of the content increases, and the minimum height of the scrubber is 20px. The scrollbar will show when the mouse moves over the content area.

Step 1:

Just keep the structure of the HTML element as same as here. Put all your contents in the DIV called <div id="updateContent">

<!--// Update Holder -->
	<div id="updateHolder">
            <div id="updateContainer">
			<div id="updateContent">
			<!-- //// You can add all your contents here ////-->
			 </div>
			<!--// don't remove this: the scrollbar and scrollscrubber place holder -->
			<div id="updateScollBar">
				<div id="updateScollScrubber">
				</div>
			</div>
			<!-- scrollbar end //-->
            </div><!-- end of updateContainer //-->
        </div><!-- end of updateHolder //-->

Step 2:

Add the CSS to your style file, and edit the Width and Height in the specified area.

 #updateHolder {
		background-color: green;
		width: 300px;  /* <= For Width: change the width value */
		color: #333;
		margin-top: 10px;
		overflow: hidden;
	    }

	    #updateContainer {
		background-color: white;
		position: relative;
		cursor: pointer;
	    }

	    #updateContent {
		width: 100%;
		background: #F2F4F8;
		position: absolute;
	    }

	    #updateScollBar {
		background: none;
		position: absolute;
		width: 10px;
		right: 0;
		bottom: 0;
		cursor: default;
	    }

	    #updateScollScrubber {
		display: none;
		background-color: black;
		zoom: 1;
		filter: alpha(opacity=40); /* For IE8 and earlier */
		opacity: 0.4;
		width: 8px;
		height: 100px;
		-moz-border-radius: 7px; /* Firefox */
		-webkit-border-radius: 7px; /* Safari, Chrome */
		border-radius: 7px; /* CSS3 */
		position: absolute;
	    }

	    #updateScollBar, #updateContainer, #updateHolder {
		height: 500px; /* <= For Height: change the height value */
	    }

Step: 3

Add the following jQuery script any where on the html page.

$(function(){

	_offsetY = 0;
	_startY = 0;

	// To resize the height of the scroll scrubber when scroll height increases.
	setScrubberHeight();

	var contentDiv = document.getElementById('updateContainer');
	scrubber = $('#updateScollScrubber');
	scrollHeight = $('#updateScollBar').outerHeight();
	contentHeight = $('#updateContent').outerHeight();
	scrollFaceHeight = scrubber.outerHeight();

	initPosition = 0;
	initContentPos = $('#updateHolder').offset().top;
	// Calculate the movement ration with content height and scrollbar height
	moveVal = (contentHeight - scrollHeight)/(scrollHeight - scrollFaceHeight);

	$("#updateContainer").mouseenter(function() {
		// Enable Scrollbar only when the content height is greater then the view port area.
		if(contentHeight > scrollHeight) {
			// Show scrollbar on mouse over
			scrubber.fadeToggle("fast");
			scrubber.bind("mousedown", onMouseDown);
		}

	}).mouseleave(function() {

		if(contentHeight > scrollHeight) {
			// Hide Scrollbar on mouse out.
			scrubber.fadeToggle("slow");
			$('#updateHolder').unbind("mousemove", onMouseMove);
			  scrubber.unbind("mousedown", onMouseDown);
		}
	});

	function onMouseDown(event) {
		$('#updateHolder').bind("mousemove", onMouseMove);
		$('#updateHolder').bind("mouseup", onMouseUp);
		_offsetY = scrubber.offset().top;
		_startY = event.pageY + initContentPos;
		// Disable the text selection inside the update area. Otherwise the text will be selected while dragging on the scrollbar.
		contentDiv.onselectstart = function () { return false; } // ie
		contentDiv.onmousedown = function () { return false; } // mozilla
	}

	function onMouseMove(event) {

		// Checking the upper and bottom limit of the scroll area
		if((scrubber.offset().top >= initContentPos) && (scrubber.offset().top  (initContentPos + scrollHeight - scrollFaceHeight)) {

				scrubber.css({top: (scrollHeight-scrollFaceHeight-1)});
				$('#updateContent').css({top: (scrollHeight - contentHeight + initPosition)});
			}

			$('#updateHolder').trigger('mouseup');
		}

	}

	function onMouseUp(event) {
		$('#updateHolder').unbind("mousemove", onMouseMove);
		contentDiv.onselectstart = function () { return true; } // ie
		contentDiv.onmousedown = function () { return true; } // mozilla
	}

	function setScrubberHeight() {
		cH = $('#updateContent').outerHeight();
		sH = $('#updateScollBar').outerHeight();

		if(cH > sH) {
			// Set the min height of the scroll scrubber to 20
			if(sH / ( cH / sH ) < 20) {
				$('#updateScollScrubber').css({height: 20 });
			}else{
				$('#updateScollScrubber').css({height: sH / ( cH / sH ) });
			}
		}
	}

});

View Demo