[英]To Reset scroll position to newly added element
在容器中,元素將被添加並動態排序。 在添加按鈕的按鈕上,我將向列表添加一個新元素。 我想將滾動位置設置為最近添加的元素。 請幫助我。
<div ng-repeat="items in listItems | orderby" style="height:500px;overflow-y:auto"> <p id="scrollPosition{{items}}"> {{items}}</p> </div>
當您添加新元素時,只需為其指定一個唯一的ID,然后只需使用此javascript
location.href = "#";
location.href = "#myDiv";
您可以將jquery動畫功能與$("div#YourContentDiv p:last-child").offset()
在Plunkr中也有一個角度動畫示例:
http://plnkr.co/edit/yz1EHB8ad3C59N6PzdCD?p=preview :
$("body, html").animate({ scrollTop: $("div#YourContentDiv p:last-child").offset().top }, 600);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <div id="YourContentDiv"> <p>new text</p> <p>new text</p> <p>new text</p> <p>new text</p> <p>new text</p> <p>new text</p> <p>new text</p> <p>new text</p> <p>new text</p> <p>new text</p> <p>new text</p> <p>new text</p> <p>new text</p> <p>new text</p> <p>new text</p> <p style="color:red">new line</p> </div>
<div ng-repeat="items in listItems | orderby" style="height:500px;overflow-y:auto">
<p id="scrollPosition{{items}}"> {{items}}</p>
//控制器
$scope.add = function(item){ $location.hash('scrollPosition'+item); $anchorScroll(); }
上面的Angular錨滾動解決了我的問題。
這肯定會解決您的問題。 我已經為自己創建了這種方法。
請注意,這是根據數據表滾動進行的。 您需要根據您的代碼更新“ .dataTables_scrollBody”之類的類。
var scrollPosition =0;
function saveScrollPosition ( container ) {
if ( $( container ) != undefined && $( container ).find( '.dataTables_scrollBody' ) != undefined ) {
scrollPosition = $( container ).find( '.dataTables_scrollBody' ).scrollTop();
} else {
scrollPosition = 0;
}
}
function setScrollPosition ( container ) {
if ( $( container ) != undefined && $( container ).find( '.dataTables_scrollBody' ) != undefined ) {
$( container ).find( '.dataTables_scrollBody' ).scrollTop( scrollPosition );
} else {
scrollPosition = 0;
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.