javascript - 将内容添加到列表时保持滚动位置 (AngularJS)

coder 2024-12-20 原文

我一直在尝试使用 ng-repeat 将一些项目添加到可滚动容器内的列表中，最近的项目应该位于列表的顶部。如果在前置内容时容器的滚动条不在最顶部，我还需要保持滚动位置。

这是我的解决方案，但我仍然遇到问题。 Angular 在 dom 中渲染前置项目后总是闪烁。

var myApp = angular.module('myApp', []);

myApp.controller('MainCtrl', function($scope, $interval, $timeout) {
  $scope.items = [];
  $interval(function() {
    var item = {
      id: Math.random(),
      text: (new Date()).toString()
    };
    $scope.items.unshift.apply($scope.items, [item]);

    var $container = $('.stream-container');
    var $topItem = $('.item:first');
    var oScrollTop = $container.scrollTop();
    var oOffset = $topItem.length ? $topItem.position().top : 0;

    $timeout(function() {
      // Executed after the dom has finished rendering
      if ($container.scrollTop() !== 0) {
        $container.scrollTop(oScrollTop + ($topItem.length ? $topItem.position().top : 0) - oOffset);
      }
    });
  }, 1000);
});

.stream-container {
  overflow-y: scroll;
  overflow-x: none;
  height: 100px;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<body ng-app="myApp">
  <div class="stream-container" ng-controller="MainCtrl">
    <div class="stream">
      <div class="item" ng-repeat="item in items track by item.id">{{ item.text }}</div>
    </div>
  </div>
</body>

最佳答案

我找到了 this post并将 $timeout 更改为 $scope.$$postDigest。现在它按预期工作。

var myApp = angular.module('myApp', []);

myApp.controller('MainCtrl', function($scope, $interval, $timeout) {
  $scope.items = [];
  $interval(function() {
    var item = {
      id: Math.random(),
      text: (new Date()).toString()
    };
    $scope.items.unshift.apply($scope.items, [item]);

    var $container = $('.stream-container');
    var $topItem = $('.item:first');
    var oScrollTop = $container.scrollTop();
    var oOffset = $topItem.length ? $topItem.position().top : 0;

    $scope.$$postDigest(function() {
      // Executed after the dom has finished rendering
      if ($container.scrollTop() !== 0) {
        $container.scrollTop(oScrollTop + ($topItem.length ? $topItem.position().top : 0) - oOffset);
      }
    });
  }, 1000);
});

.stream-container {
  overflow-y: scroll;
  overflow-x: none;
  height: 100px;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<body ng-app="myApp">
  <div class="stream-container" ng-controller="MainCtrl">
    <div class="stream">
      <div class="item" ng-repeat="item in items track by item.id">{{ item.text }}</div>
    </div>
  </div>
</body>

关于javascript - 将内容添加到列表时保持滚动位置 (AngularJS)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32503265/

有关javascript - 将内容添加到列表时保持滚动位置 (AngularJS)的更多相关文章

ruby - 我需要将 Bundler 本身添加到 Gemfile 中吗？ - 2
当我使用Bundler时，是否需要在我的Gemfile中将其列为依赖项？毕竟，我的代码中有些地方需要它。例如，当我进行Bundler设置时:require"bundler/setup" 最佳答案没有。您可以尝试，但首先您必须用鞋带将自己抬离地面。关于ruby-我需要将Bundler本身添加到Gemfile中吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/4758609/
ruby - 将数组的内容转换为 int - 2
我需要读入一个包含数字列表的文件。此代码读取文件并将其放入二维数组中。现在我需要获取数组中所有数字的平均值，但我需要将数组的内容更改为int。有什么想法可以将to_i方法放在哪里吗？ClassTerraindefinitializefile_name@input=IO.readlines(file_name)#readinfile@size=@input[0].to_i@land=[@size]x=1whilex 最佳答案只需将数组映射为整数:@land边注如果你想得到一条线的平均值，你可以这样做:values=@input[x]
ruby - 将 Bootstrap Less 添加到 Sinatra - 2
我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它
ruby - 续集在添加关联时访问many_to_many连接表 - 2
我正在使用Sequel构建一个愿望list系统。我有一个wishlists和itemstable和一个items_wishlists连接表(该名称是续集选择的名称)。items_wishlists表还有一个用于facebookid的额外列(因此我可以存储opengraph操作)，这是一个NOTNULL列。我还有Wishlist和Item具有续集many_to_many关联的模型已建立。Wishlist类也有:selectmany_to_many关联的选项设置为select:[:items.*,:items_wishlists__facebook_action_id].有没有一种方法可以
ruby - RVM 使用列表[0] - 2
是否有类似“RVMuse1”或“RVMuselist[0]”之类的内容而不是键入整个版本号。在任何时候，我们都会看到一个可能包含5个或更多ruby的列表，我们可以轻松地键入一个数字而不是X.X.X。这也有助于rvmgemset。最佳答案这在RVM2.0中是可能的=>https://docs.google.com/document/d/1xW9GeEpLOWPcddDg_hOPvK4oeLxJmU3Q5FiCNT7nTAc/edit?usp=sharing-知道链接的任何人都可以发表评论
ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby 变量的内容？ - 2
我是一个Rails初学者，但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby中打印出变量(认为它会在终端中出现)，但没有得到任何结果。有什么建议吗？我知道Rails调试器，但更喜欢使用inspect来打印我的变量。最佳答案您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R
ruby - 查找字符串中的内容类型(数字、日期、时间、字符串等) - 2
我正在尝试解析一个CSV文件并使用SQL命令自动为其创建一个表。CSV中的第一行给出了列标题。但我需要推断每个列的类型。Ruby中是否有任何函数可以找到每个字段中内容的类型。例如，CSV行:"12012","Test","1233.22","12:21:22","10/10/2009"应该产生像这样的类型['integer','string','float','time','date']谢谢! 最佳答案 require'time'defto_something(str)if(num=Integer(str)rescueFloat(s
ruby - 可以通过多少种方法将方法添加到 ruby 对象？ - 2
当谈到运行时自省(introspection)和动态代码生成时，我认为ruby没有任何竞争对手，可能除了一些lisp方言。前几天，我正在做一些代码练习来探索ruby的动态功能，我开始想知道如何向现有对象添加方法。以下是我能想到的3种方法:obj=Object.new#addamethoddirectlydefobj.new_method...end#addamethodindirectlywiththesingletonclassclass这只是冰山一角，因为我还没有探索instance_eval、module_eval和define_method的各种组合。是否有在线/离线资
ruby - 如何在 Ruby 中向现有方法定义添加语句 - 2
我注意到类定义，如果我打开classMyClass，并在不覆盖的情况下添加一些东西我仍然得到了之前定义的原始方法。添加的新语句扩充了现有语句。但是对于方法定义，我仍然想要与类定义相同的行为，但是当我打开defmy_method时似乎,def中的现有语句和end被覆盖了，我需要重写一遍。那么有什么方法可以使方法定义的行为与定义相同，类似于super，但不一定是子类？最佳答案我想您正在寻找alias_method:classAalias_method:old_func,:funcdeffuncold_func#similartoca
ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2
我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？最佳答案参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司

javascript - 将内容添加到列表时保持滚动位置 (AngularJS)

有关javascript - 将内容添加到列表时保持滚动位置 (AngularJS)的更多相关文章

随机推荐