Question

我复制了来自jsfiddle的代码，该代码在fiddler中运行但是当我尝试在浏览器中运行相同的代码时，我没有得到滚动事件。控制台中没有错误。这是我从jsfiddle复制的代码。

HTML文件

<!DOCTYPE html>
<html>
<head>
<title>Angular Synchronous scroll</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<div class="wrapper" combine-horizontal-scrolls="horizontal-scroll">
    <div class="horizontal-scroll top"><div class="content"></div></div>
    <div class="horizontal-scroll bottom"><div class="content"></div></div>
</div>
</body>
</html>

JS档案

  var myApp = angular.module('myApp',[]);
 myApp.directive('combineHorizontalScrolls', [function(){
    var scrollTop = 0;
    function combine(elements){
        elements.on('scroll', function(e){
            if(e.isTrigger){
                debugger;
                e.target.scrollTop = scrollTop;
            }else {
                scrollTop = e.target.scrollTop;
                elements.each(function (element) {
                    if( !this.isSameNode(e.target) ){
                        $(this).trigger('scroll');
                    }
                });
            }
        });
    }

    return {
        restrict: 'A',
        replace: false,
        compile: function(element, attrs){
            combine(element.find('.'+attrs.combineHorizontalScrolls));
        }
    };
}]);

CSS文件

.top{
background: yellow;
height: 100px;
overflow-x: auto;
 }

.bottom{
background: red;
height: 100px;
overflow-x: auto;
}

.content{
width: 300%;
height: 100%;
}

Answer 1

您似乎忘了将ng-app添加到body元素

<body ng-app="myApp">

Angular Code在jsfiddle中工作，而不是在浏览器中

1 个答案: