Question

我有一个可滚动的面板，显示的内容大于屏幕

new Ext.Panel({
  scroll: 'vertical',
  html: 'very larger content here with an anchor. <p id="anchor">'
});

和（在点击事件上）我想（以编程方式）将面板滚动到某个HTML元素。最好甚至是动画的。在jquery中，我会按照

的方式做点什么

$('html,body').animate({ scrollTop: $("#anchor").offset().top }, 'slow');

Answer 1

原来你可以做的是

function scrollIntoView(el,cmp) {
  var dy = cmp.scroller.offset.y + el.getY() - cmp.body.getY();
  cmp.scroller.setOffset({x:0, y:-dy}, true);
}

scrollIntoView(Ext.fly('anchor'), Ext.getCmp('panel'));

可能与scrollIntoView()内部的内容非常相似 - 虽然没有查看该代码。但它没有动画。

Answer 2

您可以使用setOffset()对象的scroller功能执行此操作。

实施例：你有原始小组：

var myPanel = new Ext.Panel({
  scroll: 'vertical',
  html: 'very larger content here with an anchor. <p id="anchor">'
});

要滚动此元素，只需调用

即可

myPanel.scroller.setOffset(0,20)

您可以添加第三个动画参数，如文档here所示，但我还没有测试过那个参数。

Answer 3

据我所知，Sencha Touch存在问题，请注意，与其他Sencha框架一样，Touch中没有.scrollIntoView()方法。可以通过将iScroll与Touch集成来完成，这将为您提供iScroll方法来完成它并使您的滚动更加原生。 Here就是如何完成的一个例子。

以编程方式将Sencha Touch Ext.Panel滚动到锚元素

3 个答案: