I have a specific requirement to showcase a lineup of elements in a single row, granting users the ability to scroll through them. Upon reaching the end of the scroll, a function should be triggered to add more elements to this lineup.
I've successfully displayed the elements in a row, triggered the function at the end of the scroll, and added new elements to the lineup. However, I'm facing an issue where the newly added elements aren't displaying in the view, and the end of the scroll functionality ceases to work.
Using AngularJS, my ultimate goal is to achieve infinite horizontal scrolling.
Below is a snippet of my code: - HTML :
<div class="timeline">
<div ng-repeat="t in test" class="content">
qqq
</div>
</div>
CSS :
.timeline {
width: 500px;
overflow-x: auto;
white-space: nowrap;
}
.content {
display: inline-block;
width: 200px;
height: 200px;
background-color: red;
}
JS :
app.controller('timelineController', ['$scope', function($scope) {
$scope.test = [];
for (var i = 0; i < 10; i++) {
$scope.test.push(i);
}
$(function () {
$('.timeline').scroll(function () {
if ($('.timeline').scrollLeft() == ($scope.test.length * 200 - 500)) {
for (var i = 0; i < 10; i++) {
$scope.test.push(i);
}
}
});
});
}]);
I've utilized jQuery for this functionality, but my preference is to integrate AngularJS. Unfortunately, I haven't come across a solution to address my current issue.
Here's a fiddle link for reference: https://jsfiddle.net/b67x9pog/
I'm open to any and all ideas to help troubleshoot this situation!