如何使用AngularJS向左滚动div答案

【问题标题】：How to scroll a div to left using AngularJS如何使用AngularJS向左滚动div
【发布时间】：2014-05-25 21:39:03
【问题描述】：

我有一个如下所示的 div：

<div class="col-xs-1 scroll-button"><i class="glyphicon glyphicon-chevron-left"></i> </div>
<div class="customer-ust-bant col-xs-22" id="letters">
    <box ng-repeat="lt in alph" name="{{lt}}" id="{{lt}}"></box>
</div>
<div class="col-xs-1 scroll-button" ng-click="gotoBottom()"><i class="glyphicon glyphicon-chevron-right"></i> </div>

和盒子模板：

<div class="alphabet-kutu">{{name|uppercase}}</div>

和指令：

app.directive("box", function() {
return {
    restrict:"E",
    scope:{
        name:"@"
    },
    templateUrl:"/static/templates/customers/box.html",
    link:function(scope,elem,attrs,ctrl) {

    }
  };
})

如您所见，我的 div 包含字母表中的字母并以水平滚动方式设置样式。

当一个按钮被点击时，我想将这个 div 向左滚动。

 $scope.gotoBottom = function (){
var element = angular.element( document.querySelector( '#letters' ) );
    element.animate({scrollLeft: element.offset().left}, "slow");
    //element.scrollLeft(100);

};

我尝试了 animate 和 scrollLeft 函数。但我没有做任何好事。 AngularJS 中是否有针对这种情况的特殊功能？如何使用 jQuery 将 div 向左滚动？

【问题讨论】：

框内的内容需要滚动还是向左移动？
angular.element doesn't have an animate method
@Blazemonger 如果他包含 jQuery，元素将是 jQuery 对象。
@jcubic 滚动内容

标签： jquery css angularjs

【解决方案1】：

我认为您应该为 scrollLeft 赋予另一个值。因为在给定的代码中，您试图将元素滚动到其当前位置，因此它不会移动。例如：

element.animate({scrollLeft: element.offset().left - 50}, "slow");

PS：请确保您已包含 jQuery。 angularJS中嵌入的jQuery子集好像不支持animate函数

【讨论】：