jQuery.kinetic - 如何在页面加载时预先滚动到特定位置

Question

我正在使用jQuery.kinetic来允许一个DIV通过鼠标拖动在其父DIV内滚动，就像作者网站上的演示一样。默认情况下，当页面加载时，内部div的左上角与父div的左上角对齐（意味着已经向上和向左滚动了尽可能多的距离）。如下所示：

我希望在页面加载时将内部div向右滚动特定数量的像素，使其大致居中。类似于这样：

我没有在文档中看到有关指定内部div起始位置的内容，但似乎jQuery.kinetic的作者构建了一种方法来扩展插件的默认功能，例如：

$.Kinetic.prototype.newFeature = function(options){
   // define the task
};

然后我可以调用那个功能：

// use the method
$('#elem').kinetic('newFeature', { options });

没有我错过的设置页面加载时位置的方法吗？如果没有，我该如何扩展插件以实现我的需求？

谢谢！

- TheIronCheek

---

只给内部div一个负的margin-left，这样做不起作用吗？ - digglemister

@snookieordie - 我明天会再仔细检查一下，但如果它的工作方式类似于调整“left”，它将可以正确地移动图像，但是无法向后滚动到被裁剪的部分。 - TheIronCheek

@snookieordie - 是的，那就是它所做的全部。 - TheIronCheek

Answer 1

我花了很长时间才发现Kinetic插件具有手动滚动容器的内置功能。虽然在文档中没有提到，但通过检查插件代码，我注意到它具有控制x轴和y轴滚动位置的方法。

在文件jquery.kinetic.js中，从第458行到第475行（撰写本文时）定义了scrollLeft和scrollTop方法。https://github.com/davetayls/jquery.kinetic/blob/master/jquery.kinetic.js#L458 您可以在已激活Kinetic实例的容器上使用它们，调用以下方法即可：

$("container-selector").kinetic("scrollLeft", 50);
$("container-selector").kinetic("scrollTop", 480);

值得阅读 Kinetic 代码，了解其工作原理和可用功能，以代替更完整的文档。

- RSmithlal