Question

我正在构建一个带有表格的AngularJS（以及其他东西）供电网站，这个网站有点太宽，无法在屏幕较小的设备上显示。因此，当父元素（页面的主要内容块）太窄而不适合表div时，我可以将其水平滚动。

HTML：

<fieldset ng-show="tels.length > 0">
    <div class="table-wrapper">
        <div class="table" ng-repeat="type in types">
            <div class="form-group control-group"
                ng-repeat="tel in tels | filter:{type:type.name} | orderBy:'label'">
                <div>{{tel.label}}</div>
                <div>{{tel.value}}</div>
                <div>{{tel.description}}</div>
                ...
            </div>
        </div>
    </div>
</fieldset>

CSS：

.table-wrapper {
    margin-bottom: 10px;
    overflow-x: auto;
}

.table-wrapper .table {
    table-layout: fixed;
    min-width: 500px;
    padding-right: 12px;
    margin-bottom: 15px;
}

.table-wrapper .table > div {
    margin-right: 0px;
    margin-left: 0px;
}

这样可行，但由于滚动条始终不可见，并且并不总是有一些截断内容暗示可滚动的表格，因此我希望动态添加一些指标。 ;可以滚动表格，如this或this（但水平）

为了监控表格的滚动位置，我在角度代码中添加了观察者：

$scope.$watch($('.table-wrapper'), function() {
    var scrolled = angular.element('.table-wrapper').scrollLeft();
    $log.info("scrolled: " + scrolled);
});

这似乎记录了表格的水平位置，但最初只记录：

scrolled: 0

滚动表格时不会更新，即使DOM元素的scrollLeft属性在检查时确实反映了它的位置。

奇怪的是，下面的jQuery代码会在滚动时记录水平滚动位置，我可以像在JsFiddle中那样工作（缩小输出屏幕的大小）：

$(document).ready(function() {
    $('.table-wrapper').on('scroll', function() {
        var scrolled = $('.table-wrapper').scrollLeft();
        console.log("scrolled: " + scrolled);
    });
});

AngularJS没有这样的运气。我做错了什么？

Answer 1

下面的代码在这种情况下不起作用，尝试使用滚动条的事件或使用table-responsive类

的引导程序

$scope.$watch($('.scroll-horizontal'), function() {
    var scrolled = angular.element('.scroll-horizontal').scrollLeft();
    $log.info("scrolled: " + scrolled);
});

尝试使用类似的东西

    function logScroll(ev){
      if(window.pageYOffset>400)alert('User has scrolled at least 400 px!');
    }
    window.onscroll=logScroll

AngularJS - 水平滚动div指标

1 个答案: