Angular material 1 / md-virtual-repeat select scroll

Question

What is the right way to change md-virtual-repeat's scroll to watch events from an other scroll ?

I have tried some manual triggering

And i readed this question but it is not exactly i want.

So is there a way to select a scrool to virtual-repeat container ?

EDIT 2

I need to change scrollbar of virtual repeat with scrollbar of Body

Live example

(function() {
  'use strict';

  var app = angular.module('MyApp', ['ngMaterial', 'ngMessages']);

  app.filter('to_trusted', ['$sce', function($sce) {
    return function(text) {
      return $sce.trustAsHtml(text);
    };
  }]);

  app.controller('AppCtrl', function($timeout) {
    this.itemSize = 529.39;

    var DynamicItems = function() {
      this.loadedPages = {};
      this.numItems = 0;
      this.PAGE_SIZE = 50;
      this.fetchNumItems_();
    };

    DynamicItems.prototype.getItemAtIndex = function(index) {
      var pageNumber = Math.floor(index / this.PAGE_SIZE);
      var page = this.loadedPages[pageNumber];

      if (page) {
        return page[index % this.PAGE_SIZE];
      } else if (page !== null) {
        this.fetchPage_(pageNumber);
      }
    };

    DynamicItems.prototype.getLength = function() {
      return this.numItems;
    };

    DynamicItems.prototype.fetchPage_ = function(pageNumber) {
      this.loadedPages[pageNumber] = null;

      $timeout(angular.noop, 300).then(angular.bind(this, function() {
        this.loadedPages[pageNumber] = [];
        var pageOffset = pageNumber * this.PAGE_SIZE;
        //console.log(pageNumber);

        for (var i = pageOffset; i < pageOffset + this.PAGE_SIZE; i++) {
          var obj = {};
          obj.name = 'Ad ' + i;
          obj.surname = 'Soyad ' + i;
          obj.age = i;
          obj.image = 'http://lorempixel.com/75/75/cats?' + i;
          obj.list = [];
          obj.clicked = false;
          obj.status = "asd";
          obj.html = '' + i + '---Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500 lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960 larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.' + i;
          for (var j = 0; j < 1000; j++) {
            obj.list.push('http://lorempixel.com/75/75/city/?' + j);
          }

          this.loadedPages[pageNumber].push(obj);
        }

        //this.setItemNum(this.numItems + this.PAGE_SIZE);
      }));
    };

    DynamicItems.prototype.fetchNumItems_ = function() {
      $timeout(angular.noop, 300).then(angular.bind(this, function() {
        //console.log("fetchNumItems_");
        this.numItems = 10000;
      }));
    };

    DynamicItems.prototype.setItemNum = function(number) {
      this.numItems = number;
    };

    this.dynamicItems = new DynamicItems();
    //console.log(this.dynamicItems);
  });
}());

.virtualRepeatdemoDeferredLoading #vertical-container {
  width: 100%;
}
.virtualRepeatdemoDeferredLoading .repeated-item {
  border-bottom: 1px solid #ddd;
  box-sizing: border-box;
  padding-top: 10px;
}
.virtualRepeatdemoDeferredLoading md-content {
  margin: 16px;
}
.virtualRepeatdemoDeferredLoading md-virtual-repeat-container {
  border: solid 1px grey;
}
.virtualRepeatdemoDeferredLoading .md-virtual-repeat-container .md-virtual-repeat-offsetter div {
  padding-left: 16px;
}
.virtualRepeatdemoHorizontalUsage #horizontal-container {
  height: 100px;
  width: 100%;
}
.virtualRepeatdemoHorizontalUsage .repeated-item {
  border-right: 1px solid #ddd;
  box-sizing: border-box;
  display: inline-block;
  height: 84px;
  padding-top: 10px;
  text-align: center;
  width: 100px;
}
.virtualRepeatdemoHorizontalUsage md-content {
  margin: 16px;
}
.virtualRepeatdemoHorizontalUsage md-virtual-repeat-container {
  border: solid 1px grey;
}






  
  
  
  
  
  
  
  
  
  
  
  
  
  




   Virtual Repeat Test 
  

    

      

        

          
          
 Adı : {{item.name}} 
 Soyadı : {{item.surname}} 
 Yaşı : {{item.age}} 
 is Clicked : {{ item.clicked }} 
 status : {{ item.status }}
           

           List Items

Angular material 1 / md-virtual-repeat select scroll

Answers (1)

Related Questions