jlstr/css

## css
#box-container {
  width:              267px;
  height:             58%;
  position:           fixed;
  margin-top:         160px;
  overflow:           hidden;
}

#area-track {
  width:              8px;
  height:             97%;
  float:              right;
  opacity:            0;
  margin-right:       2px;
  z-index:            1;
  padding-top:        1px;
}

#grip {
  background-color:       #545454;
  width:                  7px;
  -webkit-border-radius:  7px;
  -moz-border-radius:     7px;
  border-radius:          7px;
  height:                 90%;
  z-index:                20;
  opacity:                0.9;
  top:                    0px;
}

#box {
  width:              250px;
  height:             auto;
  position:           relative;
  margin-left:        4px;
  margin-top:         5px;
  top:                0px;
}

## html
<!DOCTYPE html>
<html>
<head>
  <title>Youtubedemo</title>
  <%= stylesheet_link_tag    "application" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
</head>
<body>

<div id="header-wrap">
  <div id="header-container">
    <div id="header">
      <div id="post_form">
        <%= form_tag videos_path do %>
          <%= label_tag :url, "Video URL" %>
          <%= text_field_tag :url, params[:url], :size => 45 %>
          <%= submit_tag 'Post it' %>
        <% end %>
      </div>
      <% if notice %>
        <div id="notice"><%= notice %></div>
      <% end %>
    </div>
  </div>
</div>

<div id="main">

  <div id="left">
    <%= yield %>
  </div>

  <div id="right">
    <div id="box-container">

      <div id="area-track">
        <div id="grip">

        </div>
      </div>

      <div id="box">

        <div class="ipsum">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim nisl id ligula interdum varius sit amet et lectus.
        </div>
        <div class="ipsum">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim nisl id ligula interdum varius sit amet et lectus.
        </div>
        <div class="ipsum">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim nisl id ligula interdum varius sit amet et lectus.
        </div>
        <div class="ipsum">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim nisl id ligula interdum varius sit amet et lectus.
        </div>
        <div class="ipsum">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim nisl id ligula interdum varius sit amet et lectus.
        </div>

        <div class="ipsum-last">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim nisl id ligula interdum varius sit amet et lectus.
        </div>

        <div class="ipsum">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim nisl id ligula interdum varius sit amet et lectus.
        </div>

        <div class="ipsum">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim nisl id ligula interdum varius sit amet et lectus.
        </div>

        <div class="ipsum">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim nisl id ligula interdum varius sit amet et lectus.
        </div>


      </div>
    </div>
  </div>

</div>

</body>

</html>

## jquery
$(function(){
  displayGrip();
  dragGrip();
  calculateGripSize();
  resized();
});

function dragGrip() {
  box = $('#box');
  $('#grip').draggable({
    axis: "y",
    containment: "#area-track",
    appendTo: box,
    drag: function(event, ui) {
            var appendTo = $('#grip').draggable('option', 'appendTo');
            increment = parseInt( ui.helper.css('top')) * -1;
            //increment *= 0.45; This line controls the 'speed' of the scrolling
            appendTo.css( { top: increment } );
          }
  });
} //end of function

function displayGrip() {
  $("#box-container").hover(
    function () {
      $('#area-track').css({'opacity': '0.9'});
    },
    function () {
      $('#area-track').fadeTo(100, '0.1');
  });
}

function calculateGripSize() {
  var minH = 1,
  h = Math.max( $('#box-container').outerHeight() / parseInt($('#box').prop('scrollHeight'), 10) * 100, minH );
  $('#grip').height(h);
}

function resized() {
  $(window).resize(function() {
    calculateGripSize();
    $('#grip').css('top', 0);
    $('#box').css('top', 0);
  });
}
	#box-container {
	width: 267px;
	height: 58%;
	position: fixed;
	margin-top: 160px;
	overflow: hidden;
	}

	#area-track {
	width: 8px;
	height: 97%;
	float: right;
	opacity: 0;
	margin-right: 2px;
	z-index: 1;
	padding-top: 1px;
	}

	#grip {
	background-color: #545454;
	width: 7px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	height: 90%;
	z-index: 20;
	opacity: 0.9;
	top: 0px;
	}

	#box {
	width: 250px;
	height: auto;
	position: relative;
	margin-left: 4px;
	margin-top: 5px;
	top: 0px;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Youtubedemo</title>
	<%= stylesheet_link_tag "application" %>
	<%= javascript_include_tag "application" %>
	<%= csrf_meta_tags %>
	</head>
	<body>

	<div id="header-wrap">
	<div id="header-container">
	<div id="header">
	<div id="post_form">
	<%= form_tag videos_path do %>
	<%= label_tag :url, "Video URL" %>
	<%= text_field_tag :url, params[:url], :size => 45 %>
	<%= submit_tag 'Post it' %>
	<% end %>
	</div>
	<% if notice %>
	<div id="notice"><%= notice %></div>
	<% end %>
	</div>
	</div>
	</div>

	<div id="main">

	<div id="left">
	<%= yield %>
	</div>

	<div id="right">
	<div id="box-container">

	<div id="area-track">
	<div id="grip">

	</div>
	</div>

	<div id="box">

	<div class="ipsum">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim nisl id ligula interdum varius sit amet et lectus.
	</div>
	<div class="ipsum">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim nisl id ligula interdum varius sit amet et lectus.
	</div>
	<div class="ipsum">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim nisl id ligula interdum varius sit amet et lectus.
	</div>
	<div class="ipsum">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim nisl id ligula interdum varius sit amet et lectus.
	</div>
	<div class="ipsum">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim nisl id ligula interdum varius sit amet et lectus.
	</div>

	<div class="ipsum-last">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim nisl id ligula interdum varius sit amet et lectus.
	</div>

	<div class="ipsum">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim nisl id ligula interdum varius sit amet et lectus.
	</div>

	<div class="ipsum">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim nisl id ligula interdum varius sit amet et lectus.
	</div>

	<div class="ipsum">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim nisl id ligula interdum varius sit amet et lectus.
	</div>


	</div>
	</div>
	</div>

	</div>

	</body>

	</html>
	$(function(){
	displayGrip();
	dragGrip();
	calculateGripSize();
	resized();
	});

	function dragGrip() {
	box = $('#box');
	$('#grip').draggable({
	axis: "y",
	containment: "#area-track",
	appendTo: box,
	drag: function(event, ui) {
	var appendTo = $('#grip').draggable('option', 'appendTo');
	increment = parseInt( ui.helper.css('top')) * -1;
	//increment *= 0.45; This line controls the 'speed' of the scrolling
	appendTo.css( { top: increment } );
	}
	});
	} //end of function

	function displayGrip() {
	$("#box-container").hover(
	function () {
	$('#area-track').css({'opacity': '0.9'});
	},
	function () {
	$('#area-track').fadeTo(100, '0.1');
	});
	}

	function calculateGripSize() {
	var minH = 1,
	h = Math.max( $('#box-container').outerHeight() / parseInt($('#box').prop('scrollHeight'), 10) * 100, minH );
	$('#grip').height(h);
	}

	function resized() {
	$(window).resize(function() {
	calculateGripSize();
	$('#grip').css('top', 0);
	$('#box').css('top', 0);
	});
	}