Scrollbar looks like in new Gmail theme. The code written in jQuery and CSS.

1. The Scrollbar shows only when the content is greater thatn the view port(ie content height).

2. The scroll scrubber height will change when the height of the scroll length increase/decrease.

3. No Mouse Wheel scroll features.

See also: Facebook/Twitter style Scrollbar Using jQuery and CSS

View Demo

Step 1:

<div id="updateHolder">
    <div id="updateContainer">
    <div id="updateContent">
    <!-- You can add all your contents here -->
     Dummy Text 
    </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:

Copy paste the CSS to your style sheet. For customization please edit the width and height in the specified lines.

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

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

}

#updateContent {
    background: #fff;
    position: absolute;
    padding-right: 12px;
}

#updateScollBar {
    background: #F2F2F2;
    border-left: 1px solid #DADADA;
    position: absolute;
    width: 10px;
    right: 0;
    bottom: 0;
    cursor: default;
    zoom: 1;
    filter: alpha(opacity=25); /* For IE8 and earlier */
    opacity: 0.25;
}

#updateScollScrubber {
    background-color: 909090;
    width: 9px;
    height: 100px;
    position: absolute;
    border-left:1px solid #676767;
    border-top:1px solid #676767;

}

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

Step 3:

Add the following jQuery script to your header or footer section.

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

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

	}).mouseleave(function() {

		if(contentHeight > scrollHeight) {
			// Hide Scrollbar on mouse out.
			$(this).animate({opacity: 0.25});
			$('#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))) {
			// Move the scrubber on mouse drag
			scrubber.css({top: (_offsetY + event.pageY - _startY)});
			// Move the content area according to the scrubber movement.
			$('#updateContent').css({top: ((initContentPos - scrubber.offset().top) * moveVal)});
		}else{
			// Reset when upper and lower limits are excced.
			if(scrubber.offset().top <= initContentPos){
				scrubber.css({top: 0});
				$('#updateContent').css({top: 0});
			}

			if(scrubber.offset().top > (initContentPos + scrollHeight - scrollFaceHeight)) {

				scrubber.css({top: (scrollHeight-scrollFaceHeight-2)});
				$('#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 ) });
			}
		}
	}

});