jQuery Girl
  1. jQuery Girl
  3. Conserver la position de défilement lors de l’ajout de contenu à une liste (AngularJS)
Intereting Posts
Twitter TypeAhead.js ne met pas à jour l’entrée Comment déplacer des objects déplaçables entre la zone source et la zone cible avec jQuery En utilisant jqGrid, existe-t-il de toute façon une liste déroulante dynamic dans la fenêtre contextuelle de modification de l’enregistrement? Supprimer les espaces de début / fin de textarea à l’aide de jQuery? chaîne json de vb.net side à asp.net Comment faire pour que les appareils mobiles ne chargent pas un JS externe HTML 5 événement vidéo non terminé non déclenché Soumettre un formulaire à un nouvel onglet plusieurs fois Lancer une animation CSS en cliquant sur un bouton Puis-je utiliser la valeur d’une variable pour lancer une fonction? Créer un rappel onEdit en mains libres Recherche d’une recommandation pour un cadre HTML5 / JavaScript mobile léger Concaténer une chaîne avec l’opérateur ternaire en javascript jQuery change la couleur du texte de l’espace réservé Regrouper des éléments et exécuter des animations séparément

Conserver la position de défilement lors de l’ajout de contenu à une liste (AngularJS)

J’ai essayé d’append certains éléments à une liste dans un conteneur avec fonction de défilement à l’aide de ng-repeat , le fichier récent devant figurer en haut de la liste. Je dois également conserver la position de défilement si la barre de défilement du conteneur n’est pas tout à fait en haut lors de la présélection de contenu.

Voici ma solution, mais j’ai toujours un problème. Il y a toujours un scintillement après que angular a rendu les éléments ajoutés au début. 

 var myApp = angular.module('myApp', []); myApp.controller('MainCtrl', function($scope, $interval, $timeout) { $scope.items = []; $interval(function() { var item = { id: Math.random(), text: (new Date()).toSsortingng() }; $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; } 
    
 
 
{{ item.text }}

J’ai trouvé ce post et changé $timeout en $scope.$$postDigest . Maintenant, cela fonctionne comme prévu. 

 var myApp = angular.module('myApp', []); myApp.controller('MainCtrl', function($scope, $interval, $timeout) { $scope.items = []; $interval(function() { var item = { id: Math.random(), text: (new Date()).toSsortingng() }; $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; } 
    
 
 
{{ item.text }}