如何修复javascript代码滚动条的工作原理？ （光标移动时移动的背景）

Question

codepen.io/chrisboon27/pen/rEDIC

$(document).ready(function() {
var movementStrength = 25;
var height = movementStrength / $(window).height();
var width = movementStrength / $(window).width();
$("#top-image").mousemove(function(e){
          var pageX = e.pageX - ($(window).width() / 2);
          var pageY = e.pageY - ($(window).height() / 2);
          var newvalueX = width * pageX * -1 - 25;
          var newvalueY = height * pageY * -1 - 50;
          $('#top-image').css("background-position", newvalueX+"px     "+newvalueY+"px");
});
});

这里的代码我在body标签上使用它

和页面上的滚动条可见

但如果页面溢出则不活动（所以我只能看到页面顶部） 当我添加css overflow：scroll;无效滚动条添加工作滚动 所以它右侧的2个滚动条

那么如何修改代码以便我可以滚动页面？）