如何根据屏幕上的视图外观动画自动页面滚动？ （angulare）

Question

我有一个常规的滚动视图，在这个视图上有正方形视图（参见附图），我有一些高亮显示视图，我使用跳过按钮在屏幕之间移动并突出显示它们，有点专注于它们...但是当我到达页面底部时，突出显示在方块的一半上，因为另一半隐藏在底部（参见附图），所以我想向上滚动页面以便我可以看到整个广场......有谁知道我该怎么做这个动画？我使用angular with typescript。

谢谢！

Answer 1

调用此函数滚动到元素：

function scrollToHelper(event) {
    var offset = $(event.currentTarget).offset().top;
    $("body").animate({scrollTop: offset}, 500);
}

确保在模板上传递 $ event 并将其作为该函数的参数传递。

PS：你可能需要调整偏移量，以便根据你的需要更好地放置它。

Answer 2

https://jsfiddle.net/71zono60/1/

基本上，正如我在评论中所说，你想要在悬停时触发滚动，因此

$( '.widget' ).mouseover( ... );

你要做的是检查小部件的位置是否在窗口的框外，如下所示：

  var winHeight = $( window ).height( );
  var scrollTop = $( window ).scrollTop( ); 
  var winBottom = winHeight + scrollTop; // this gives the vertical position of the last visible pixel
  var thisPos = $( this ).offset( ).top;
  var thisPosBottom = thisPos + $( this ).height( ); // this gives the vertical position of the widget's last pixel 

  // so if the widget's last pixel comes AFTER the window's last visible one, we need to trigger the scrolling function
  if( thisPosBottom > winBottom )
    $( 'body' ).animate( {
        scrollTop: scrollTop + ( thisPosBottom - winBottom ) + 10
    }, 500 );

享受！ ：）

<强> 注意：的 我决定不将scrollTop设置为thisPos（这是小部件的顶部偏移量），因为在这种情况下，您的鼠标很可能最终会在另一个小部件上结束，这意味着它将是突出显示，这将一遍又一遍地触发，直到它到达页面的末尾，你不希望这样！