AngularJS $ anchorScroll在子元素中的yOffset [英] AngularJS $anchorScroll yOffset within a child element
问题描述
根据我的理解$ anchorScroll yOffset在子元素中是不可能的：
为了使yOffset正常工作，应该在文档的根目录上进行滚动，而不是某些子元素。 https://docs.angularjs.org/api/ng/service/ $ anchorScroll
From what I understand $anchorScroll yOffset is impossible within a child element: "In order for yOffset to work properly, scrolling should take place on the document's root and not some child element." https://docs.angularjs.org/api/ng/service/$anchorScroll
示例（从AngularJS文档修改）：
我想点击一个链接，并在滚动到的内容之上加上之间一词。
Example (modified from the the AngularJS docs): I want to click a link and include the word "between" above what is being scroll to.
index.html
index.html
<body ng-app="anchorScrollOffsetExample">
<div class="fixed-header" ng-controller="headerCtrl">
<a href="" ng-click="gotoAnchor(x)" ng-repeat="x in [1,2,3,4,5]">
Go to inner-anchor {{x}}
</a>
</div>
<div id="anchor" class="anchor">
<div ng-repeat="x in [1,2,3,4,5]">
between
<div id="innerAnchor{{x}}" class="anchor" >Inner-Anchor {{x}} of 5</div>
</div>
</div>
</body>
style.css
style.css
.anchor {
border: 2px dashed DarkOrchid;
padding: 10px 10px 200px 10px;
max-height:500px;
overflow-y: auto;
}
script.js
script.js
angular.module('anchorScrollOffsetExample', [])
.run(['$anchorScroll', function($anchorScroll) {
$anchorScroll.yOffset = 500;
}])
.controller('headerCtrl', ['$anchorScroll', '$location', '$scope',
function ($anchorScroll, $location, $scope) {
$scope.gotoAnchor = function(x) {
var newHash = 'anchor' + x;
if ($location.hash() !== newHash) {
$location.hash('innerAnchor' + x);
} else {
$anchorScroll();
}
};
}
]);
http://plnkr.co/edit/yFj9fL3sOhDqjhMawI72?p=preview
在AngularJS中有一个很好的方法吗（最好没有jQuery或者额外的库）没有在DIV内部移动到我正在滚动的DIV内部？
Is there a good way to do this within AngularJS (preferably no jQuery or additional libraries) without moving "between" to inside the DIV I'm scrolling to?
推荐答案
你为什么不使用锚标记？
Why don't you use an anchor tag?
<body ng-app="anchorScrollOffsetExample">
<div class="fixed-header" ng-controller="headerCtrl">
<a href="" ng-click="gotoAnchor(x)" ng-repeat="x in [1,2,3,4,5]">
Go to inner-anchor {{x}}
</a>
</div>
<div id="anchor" class="anchor">
<div ng-repeat="x in [1,2,3,4,5]">
<!-- Add an anchor above the text, and we scroll here instead of the div -->
<a name="innerAnchor{{x}}"></a>
between
<div class="anchor" >Inner-Anchor {{x}} of 5</div>
</div>
</div>
</body>
这篇关于AngularJS $ anchorScroll在子元素中的yOffset的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
