角度材料1/md-virtual-repeat选择滚动

Question

更改md-virtual-repeat的滚动以观看其他滚动事件的正确方法是什么？

我已经尝试了一些手动触发

而且我readed这question，但它不完全是我想要的。

那么有没有办法选择一个虚拟重复容器的scrool？

EDIT 2

我需要的滚动体

活生生的例子

(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; 
 
}

<!DOCTYPE html> 
 

 
<html class=''> 
 

 
<head> 
 
    <meta charset='UTF-8'> 
 
    <meta name="robots" content="noindex"> 
 
    <link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /> 
 
    <link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /> 
 
    <link rel="canonical" href="http://codepen.io/anon/pen/OWXMXW" /> 
 
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> 
 
    <link rel='stylesheet prefetch' href='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.css'> 
 
    <link rel='stylesheet prefetch' href='https://material.angularjs.org/1.1.1/docs.css'> 
 
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js'></script> 
 
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js'></script> 
 
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js'></script> 
 
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js'></script> 
 
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js'></script> 
 
    <script src='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.js'></script> 
 

 
</head> 
 

 
<body> 
 
    <h1> Virtual Repeat Test </h1> 
 
    <div ng-controller="AppCtrl as ctrl" ng-cloak="" flex layout-fill layout-padding class="virtualRepeatdemoDeferredLoading" ng-app="MyApp"> 
 

 
    <md-content layout="column" flex layout-fill> 
 

 
     <md-virtual-repeat-container flex layout-fill md-auto-shrink="false" layout id="vertical-container"> 
 

 
     <div md-virtual-repeat="item in ctrl.dynamicItems" id="repeat_item" md-on-demand="true" md-item-size="ctrl.itemSize" layout-fill> 
 

 
      <img ng-src="{{item.image}}" class="md-avatar" alt="{{item.name}}" /> 
 
      <br> Adı : {{item.name}} <br> Soyadı : {{item.surname}} <br> Yaşı : {{item.age}} <br> is Clicked : {{ item.clicked }} <br> status : {{ item.status }} 
 
      <p ng-bind-html=" item.html | to_trusted "> </p> 
 

 
      <h5 ng-click="item.clicked = !item.clicked; item.status = item.status + item.status; "> List Items </h5> 
 

 
      <md-content ng-if="item.clicked == true" class="virtualRepeatdemoHorizontalUsage" layout="column"> 
 

 
      <md-virtual-repeat-container id="horizontal-container" md-orient-horizontal=""> 
 
       <div md-virtual-repeat="picture in item.list" class="repeated-item" flex=""> 
 
       <img ng-src="{{ picture }}" class="md-avatar" alt="{{ picture }}" /> 
 
       </div> 
 
      </md-virtual-repeat-container> 
 
      </md-content> 
 

 
      <br> 
 

 
     </div> 
 

 
     </md-virtual-repeat-container> 
 
    </md-content> 
 

 
    </div> 
 

 
</body> 
 

 
</html>

Answer 1

如果我正确理解你的问题，以改变虚拟重复的滚动条，你只想滚动虚拟重复呃div在页面上的其他地方使用滚动条？一种方法是创建一个指令，监听要用作可见滚动条的div的滚动事件，然后以相同百分比滚动其他div。

这是一个这样的指令。将其添加到md-virtual-repeat-container并将其指向要滚动的div。 divs甚至可以是不同的高度。

更新 如果未指定元素，我更改了指令以回退到主体标记。

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

 
app.controller("myController", function($scope) { 
 
    $scope.items = []; 
 
    for (var i = 0; i < 5000000; i++) { 
 
    $scope.items.push(i); 
 
    } 
 
}); 
 

 
app.directive("scrollFrom", function($window, $document) { 
 
    return { 
 
    scope: { 
 
     elTarget: '@scrollFrom' 
 
    }, 
 
    link: function(scope, element, attrs) { 
 
     var body = $document[0].body; 
 
     angular.element(scope.elTarget || $window).bind("scroll", function() { 
 
     var percentScrolled = scope.elTarget ? 
 
      this.scrollHeight > 0 ? this.scrollTop/(this.scrollHeight - element.height()) : 0 : 
 
      body.scrollHeight > 0 ? body.scrollTop/(body.scrollHeight - element.height()) : 0; 
 
     var trgt = angular.element(element).find('.md-virtual-repeat-scroller')[0]; 
 
     trgt.scrollTop = trgt.scrollHeight * percentScrolled; 
 
     }); 
 
    } 
 
    }; 
 
});

#vertical-container { 
 
    height: 292px; 
 
    width: 100%; 
 
    max-width: 400px; 
 
    position: fixed; 
 
    top: 10px; 
 
} 
 

 
#vertical-container .md-virtual-repeat-scroller { 
 
    overflow: hidden; 
 
} 
 

 
.repeated-item { 
 
    border-bottom: 1px solid #ddd; 
 
    box-sizing: border-box; 
 
    height: 40px; 
 
    padding-top: 10px; 
 
} 
 

 
md-virtual-repeat-container { 
 
    border: solid 4px grey; 
 
}

<html ng-app="myApp"> 
 

 
<head> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.min.css" /> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-aria.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.min.js"></script> 
 
</head> 
 

 
<body style="height: 5000000px"> 
 
    <div ng-controller="myController"> 
 
    <md-virtual-repeat-container id="vertical-container" scroll-from> 
 
     <div md-virtual-repeat="item in items" class="repeated-item" flex> 
 
     {{item}} 
 
     </div> 
 
    </md-virtual-repeat-container> 
 
    </div> 
 
</body> 
 

 
</html>