如何将 jquery-jscrollpane 中的滚动条移动到文本区域光标位置

Question

我尝试在 jsfiddle 中实现。当文本区域展开滚动条时，不会移动到文本区域光标。

function addJScrollPaneTo($container) {
  // use jScrollPane jquery plugin
  $container.jScrollPane({
    verticalGutter: 1,
    stickToBottom: true,
    enableKeyboardNavigation: false,
    autoReinitialise: true
  });
}

function appendTextareaTo($container) {

  var $textarea = $("<textarea />");

  // set textarea attribute
  $textarea.css({
    'border': 'medium none'
  });
  $textarea.width($container.width());

  // use TextAreaExpander jquery plugin
  $textarea.TextAreaExpander($container.height() - 1);

  $container.append($textarea);
}

// for padding with elem
function appendContainer(elem) {

  var $container = $("<div />");

  // set container attribute
  $container.width($(elem).width());
  $container.height($(elem).height());

  $(elem).append($container);
  appendTextareaTo($container);
  addJScrollPaneTo($container);
}

function setCSS(elem) {
  $(elem).css({
    'border': 'thin solid #CCCCCC',
    'padding': '1px'
  });
}

setCSS("#test");
appendContainer("#test");

.jspContainer {
  overflow: hidden;
  position: relative;
}

.jspPane {
  position: absolute;
}

.jspVerticalBar {
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 100%;
  background: red;
}

.jspHorizontalBar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 16px;
  background: red;
}

.jspVerticalBar *,
.jspHorizontalBar * {
  margin: 0;
  padding: 0;
}

.jspCap {
  display: none;
}

.jspHorizontalBar .jspCap {
  float: left;
}

.jspTrack {
  background: #dde;
  position: relative;
}

.jspDrag {
  background: #bbd;
  position: relative;
  top: 0;
  left: 0;
  cursor: pointer;
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag {
  float: left;
  height: 100%;
}

.jspArrow {
  background: #50506d;
  text-indent: -20000px;
  display: block;
  cursor: pointer;
}

.jspArrow.jspDisabled {
  cursor: default;
  background: #80808d;
}

.jspVerticalBar .jspArrow {
  height: 16px;
}

.jspHorizontalBar .jspArrow {
  width: 16px;
  float: left;
  height: 100%;
}

.jspVerticalBar .jspArrow:focus {
  outline: none;
}

.jspCorner {
  background: #eeeef4;
  float: left;
  height: 100%;
}


/* Yuk! CSS Hack for IE6 3 pixel bug :( */

* html .jspCorner {
  margin: 0 -3px 0 0;
}

.jspVerticalBar {
  background: none;
  border-radius: 5px 5px 5px 5px;
  right: 0px;
  width: 5px;
}

.jspScrollable .jspHorizontalBar {
  background: none;
  bottom: 0px;
  height: 10px;
  border-radius: 5px 5px 5px 5px;
}

.jspScrollable .jspTrack {
  background: none repeat scroll 0 0 #D1D3D5;
  border-radius: 5px 5px 5px 5px;
}

.jspScrollable .jspDrag {
  background: none repeat scroll 0 0 #5E6063;
  border-radius: 5px 5px 5px 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="test" style="width: 235px; height: 50px;"></div>