標(biāo)簽： Angular API 中文
$anchorScrollProvider- ng 模塊中的服務(wù)
當(dāng)被調(diào)用的時(shí)候，頁面會(huì)滾動(dòng)到與元素相關(guān)聯(lián)的指定的 hash 處，或者滾動(dòng)到當(dāng)前 $location.hash() 處，是依照HTML5 spec 的規(guī)則制定的。
它當(dāng)然也會(huì)監(jiān)聽 $location.hash() 并且無論錨點(diǎn)值何時(shí)變化，都會(huì)自動(dòng)地滾動(dòng)到相應(yīng)的位置。當(dāng)不需要它時(shí)，可以調(diào)用$anchorScrollProvider.disableAutoScrolling()讓它失效。
另外我們可以使用它的 yOffset 屬性來指定一個(gè)垂直滾動(dòng)偏移量（既可以是定值也可以是動(dòng)態(tài)值）。
依賴
$window $location $rootScope
用法
$anchorScroll([hash]);
參數(shù)
| 參數(shù) | 形式 | 具體 |
|---|---|---|
hash (可選)
|
string |
hash 將會(huì)指定元素滾動(dòng)到的位置，如果省略參數(shù)，則將使用$location.hash() 作為默認(rèn)值。 |
屬性
yOffset
| --- | --- |
|---|---|
numberfunction()jqLite
|
如果設(shè)置了這個(gè)值，將會(huì)指定一個(gè)垂直的滾動(dòng)的偏移量。這種場(chǎng)景經(jīng)常用于在頁面頂部有固定定位的元素, 如導(dǎo)航條，頭部等（讓出頭部空間）。yOffset 可以用多種途徑指定: - number : 一個(gè)固定的像素值可以使用（無單位）。 - function : 每次 $anchorScroll()執(zhí)行時(shí)這個(gè)函數(shù)都會(huì)被調(diào)用，它必須返回一個(gè)代表位移的數(shù)字（無單位像素值）。jqLite : 一個(gè)jqLite/jQuery元素可以被指定為位移值。這個(gè)位移值會(huì)取頁面的頂部到該元素底部的距離。 注意: 只有有元素的定位方式是固定定位時(shí)才會(huì)應(yīng)該被納入考慮之中。這個(gè)設(shè)置 在響應(yīng)式的導(dǎo)航條/頭部需要調(diào)整他們的高度亦或 根據(jù)視圖來定位時(shí)很有用處。 |
為了使
yOffset正確地工作，滾動(dòng)必須是在文檔的根節(jié)點(diǎn)，而不是子節(jié)點(diǎn)。
例子
html
<div id="scrollArea" ng-controller="ScrollController">
<a ng-click="gotoBottom()">Go to bottom</a>
<a id="bottom"></a> You're at the bottom!
</div>
javascript
angular.module('anchorScrollExample', [])
.controller('ScrollController', ['$scope', '$location', '$anchorScroll',
function ($scope, $location, $anchorScroll) {
$scope.gotoBottom = function() {
// 將location.hash的值設(shè)置為
// 你想要滾動(dòng)到的元素的id
$location.hash('bottom');
// 調(diào)用 $anchorScroll()
$anchorScroll();
};
}]);
css
#scrollArea {
height: 280px;
overflow: auto;
}
#bottom {
display: block;
margin-top: 2000px;
}
下面的例子將說明如何使用一個(gè)垂直滾動(dòng)偏移（指定了一個(gè)固定值）關(guān)于 $anchorScroll.yOffset 的詳情請(qǐng)看上方介紹
html
<div class="fixed-header" ng-controller="headerCtrl">
<a href="" ng-click="gotoAnchor(x)" ng-repeat="x in [1,2,3,4,5]">
Go to anchor {{x}}
</a>
</div>
<div id="anchor{{x}}" class="anchor" ng-repeat="x in [1,2,3,4,5]">
Anchor {{x}} of 5
</div>
javascript
angular.module('anchorScrollOffsetExample', [])
.run(['$anchorScroll', function($anchorScroll) {
$anchorScroll.yOffset = 50; // 總是滾動(dòng)額外的50像素
}])
.controller('headerCtrl', ['$anchorScroll', '$location', '$scope',
function ($anchorScroll, $location, $scope) {
$scope.gotoAnchor = function(x) {
var newHash = 'anchor' + x;
if ($location.hash() !== newHash) {
// 將$location.hash設(shè)置為`newHash` and
// $anchorScroll也將自動(dòng)滾到該處
$location.hash('anchor' + x);
} else {
// 顯式地調(diào)用 $anchorScroll()方法 ,
// 因?yàn)?$location.hash 并沒有改變
$anchorScroll();
}
};
}
]);
css
body {
padding-top: 50px;
}
.anchor {
border: 2px dashed DarkOrchid;
padding: 10px 10px 200px 10px;
}
.fixed-header {
background-color: rgba(0, 0, 0, 0.2);
height: 50px;
position: fixed;
top: 0; left: 0; right: 0;
}
.fixed-header > a {
display: inline-block;
margin: 5px 15px;
}
本文由作者原創(chuàng)，翻譯內(nèi)容仍有欠佳之處，請(qǐng)大家多多指正。via 村里有個(gè)村長 / @西瓜橘子葡萄冰
