AngularJS新闻流分页加载后滚动位置异常：无法定位至前页底部

嘿，我看你在AngularJS新闻流的滚动逻辑上卡壳了，咱们来快速定位问题并解决它～

问题根源 #

你当前的代码里，window.scrollTo(0, $scope.iframeHeight)是用document.documentElement.scrollHeight获取整个文档的高度，但这里有个关键问题：你是在加载完第二页内容之后才获取的文档高度，这时候文档已经包含了新加载的内容，所以滚动到这个高度自然就到了文档末尾，而不是你想要的第一页底部。

解决方案思路 #

要实现点击「加载更多」后滚动到第一页底部，核心是在加载新内容之前，先记录下当前页面的底部位置——也就是当前滚动的距离加上浏览器可视窗口的高度，这个值就是第一页的底部位置。然后等新内容加载并渲染完成后，再滚动到这个预先记录的位置。

修改后的代码示例 #

$scope.feedCopy = function() {
    $scope.loader = false;
    
    // 🌟 关键：在加载新内容前，记录当前页面的底部位置
    const targetScrollPosition = window.scrollY + window.innerHeight;

    $http.get('http://web.com/app/get_feeds/1/' + $scope.member_id + '?page=' + $scope.feeds_current_page)
        .then(function(response) {
            $scope.feeds = $scope.feeds.concat(response.data.data);
            $scope.feeds2 = angular.copy($scope.feeds);
            $current_index = $scope.feeds2[0].feed_id;
            var i = 0;
            $scope.showLess = true;
            $scope.showMore = false;
            
            for(i; i < $scope.feeds2.length; i++) {
                $scope.feeds2[i].show_less = 1;
                if($scope.feeds[i].feed_text != null) {
                    $scope.original_length = $scope.feeds2[i].feed_text.length;
                    $scope.feeds2[i].feed_text = $scope.feeds[i].feed_text.substring(0,40);
                    $scope.temp_length = $scope.feeds2[i].feed_text.length;
                    if($scope.temp_length >= $scope.original_length) {
                        $scope.feeds2[i].show_less_button = 1;
                    }
                } else {
                    $scope.feeds2[i].show_less = -1;
                }
            }
            
            $scope.feeds_total_page = response.data.total_pages;
            if($scope.feeds_total_page > $scope.feeds_current_page) {
                $scope.feeds_current_page += 1;
                $scope.load_more = true;
            }
            $scope.feed_condition_current_page++;

            // 🎯 等Angular渲染完新DOM后，滚动到预先记录的位置
            $timeout(function() {
                window.scrollTo(0, targetScrollPosition);
            });
        });
};

额外说明 #

• 为什么要用$timeout？因为AngularJS的ng-repeat更新DOM是在digest cycle（消化周期）里异步执行的，$http的then回调完成后，新的新闻内容还没真正渲染到页面上，直接滚动可能位置不准。$timeout会让滚动逻辑在digest cycle结束后执行，确保DOM已经更新完成。
• 如果你的新闻流是放在自定义滚动容器（比如某个带overflow: scroll的div）里，那要把window.scrollY和window.innerHeight换成容器元素的scrollTop和clientHeight，比如：

  const scrollContainer = document.getElementById('your-feed-container');
  const targetScrollPosition = scrollContainer.scrollTop + scrollContainer.clientHeight;
  // 滚动时用容器的scrollTop
  scrollContainer.scrollTop = targetScrollPosition;
  

内容的提问来源于stack exchange，提问作者Suraj Kumar