在视口中可见时，向下滚动以溢出DIV

Question

当它进入视口时，我想向下滚动一个溢出滚动div。但这不起作用，我想要...

HTML

<div class="container">
  <div class="content">
  1<br />
  2<br />
  3<br />
  4<br />
  5<br />
  6<br />
  7<br />
  8<br />
  9<br />
  10<br />
  11<br />
  12<br />
  13<br />
  14<br />
  15<br />
  16<br />
  17<br />
  18<br />
  19<br />
  20<br />
  <span id="bottom"></span>
  </div>
</div>

JS：

$(window).scroll(function () {
  if ($('.container').is(':in-viewport')) {
    $( ".content" ).animate({ scrollTop: $('#bottom').offset().top + (-0)}, 5000);
    return false;
  }
});

使用jQuery 2.1.3和jquery.viewport.mini.js

这是小提琴： http://jsfiddle.net/q2swm69d/7/

我只想向下滚动最后50像素。