web-dev-qa-db-ja.com

AngularJSのdivの一番上までスクロールしますか？

小さなWebアプリにAngularJSを使用していますが、問題が発生しました。 ng-repeatを使用して、div内にリストを設定しています。 divの高さは固定されており、overflow-y: autoに設定されています。つまり、リストがdivに対して大きすぎる場合にスクロールバーが表示されます。私の問題は、リストが再描画されたとき、つまりng-repeatが変更されたときに、スクロールバーがdivの上部にリセットされないことです。代わりに、ng-repeatの変更前のスクロールバーの位置にとどまります。これはユーザーエクスペリエンスが非常に悪いです。私は運なしで以下を試しました：

<div id="myList">
  <ul>
    <li ng-repeat="item in items">{{item}}</li>
  </ul>
</div>

<a ng-click="switchItems()">Switch</a>

<script>
function MyApp($scope) {
  $scope.switchItems = function() {
    $('#myList').scrollTop();
    $scope.items = [1, 2, 3, 4]; // new items
  };
}
</script>
javascriptjqueryhtmlcssangularjs
37
Max

私は同じ問題を抱えており、通常は次の一般的な指令で解決します。指定されたイベントをリッスンし、そのイベントが発生するたびに、要素をスクロールしてy = 0。必要なことは$broadcastリストが変更されたときのコントローラーのイベント。

angular.module("ui.scrollToTopWhen", [])
.directive("scrollToTopWhen", function ($timeout) {
  function link (scope, element, attrs) {
    scope.$on(attrs.scrollToTopWhen, function () {
      $timeout(function () {
        angular.element(element)[0].scrollTop = 0;
      });
    });
  }
});

使用法：

// Controller
$scope.items = [...];
$scope.$broadcast("items_changed")

// Template
<div id="myList" scroll-to-top-when="items_changed">
54
Elise

DIVのコンテンツをwatchesというディレクティブを追加するだけです。その後、コンテンツが変更されるたびに上部にスクロールします！このソリューションでは、イベント処理は必要ありません（ここでは不要だと思います）。

mod.directive('scrollToTop', function(){
    return {
        restrict: 'A',
        link: function postLink(scope, elem, attrs) {
            scope.$watch(attrs.scrollToTop, function() {
                elem[0].scrollTop = 0;
            });
        }
    };
});

HTMLマークアップは、ディレクティブを使用してスクロールをトリガーします。

<div class='myList' data-scroll-to-top='data.items.length'>
  <ul>
    <li data-ng-repeat='item in data.items'>{{item}}</li>
  </ul>
</div>

リストにアイテムを追加すると、DIVが上部にスクロールします！動作コードを使用したjsFiddleを次に示します。 http://jsfiddle.net/pkgbtw59/89/

19
Bonneville

テーブルボディのスクロールでも同じ問題に直面しました。次の方法で解決しました。

これが私のサンプルhtmlです。

<table id="rateplanmapping-scroll">
    <thead>
       <th></th>....
    </thead>
    <tbody >
        <tr ng-repeat="data in datas"> //this is the data
            <td></td>.....
        </tr>
    </tbody>
</table>

以下にangularを上にスクロールするコードを示します

<script>

  angular.element("#rateplanmapping-scroll tbody")[0].scrollTop=0; 

</script>

役に立てば幸いです。
このスクリプトを必要な機能に入れると、特定のことが起こると自動的にトリガーされます。または、イベントに添付することもできます。

Div要素の場合、これは次の方法で実行できます。

http://plnkr.co/edit/0B4zrFTho6GYuPAS0S1A?p=preview

ありがとう。

4
RIYAJ KHAN

docs に従って$ anchorScrollを使用することもできます

// set the location.hash to the id of
// the element you wish to scroll to.
$location.hash('bottom');

// call $anchorScroll()
$anchorScroll();

これを$ timeout内にラップする必要があります。

$timeout(function() {
  $location.hash('myList');
  $anchorScroll();
})
4
Chris Ritchie