किसी सूची में सामग्री तैयार करते समय स्क्रॉल स्थिति बनाए रखें (AngularJS)

मैं ng-repeat का उपयोग करके स्क्रॉल करने योग्य कंटेनर के भीतर किसी सूची में कुछ आइटम प्रीपेड करने का प्रयास कर रहा हूं, और हाल ही में सूची के शीर्ष पर होना चाहिए। यदि सामग्री तैयार करते समय कंटेनर की स्क्रॉल बार बहुत ऊपर नहीं है तो मुझे स्क्रॉल स्थिति को बनाए रखने की भी आवश्यकता है।किसी सूची में सामग्री तैयार करते समय स्क्रॉल स्थिति बनाए रखें (AngularJS)

मेरा समाधान यहां है, लेकिन मुझे अभी भी एक समस्या है। कोणीय ने डोम में प्रीपेड किए गए आइटमों को प्रस्तुत करने के बाद हमेशा झटकेदार होते हैं।

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>

स्रोत

2015-09-10 micmia

मैं this post पाया और $scope.$$postDigest करने के लिए $timeout बदल दिया है। अब यह उम्मीद के अनुसार काम करता है।

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>

स्रोत

2015-09-10 14:29:31 micmia

किसी सूची में सामग्री तैयार करते समय स्क्रॉल स्थिति बनाए रखें (AngularJS)

उत्तर

संबंधित मुद्दे