AngularJS $anchorScroll 子元素内的 yOffset

2023-12-22

据我了解, $anchorScroll yOffset 在子元素中是不可能的: “为了使 yOffset 正常工作,滚动应该发生在文档的根元素上,而不是某些子元素上。”https://docs.angularjs.org/api/ng/service/ https://docs.angularjs.org/api/ng/service/$anchorScroll

示例(根据 AngularJS 文档修改): 我想单击一个链接,并在滚动到的内容上方添加“之间”一词。

索引.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>

样式.css

  .anchor {
    border: 2px dashed DarkOrchid;
    padding: 10px 10px 200px 10px;
    max-height:500px;
    overflow-y: auto;
  }

脚本.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 http://plnkr.co/edit/yFj9fL3sOhDqjhMawI72?p=preview

有没有一种好方法可以在 AngularJS(最好没有 jQuery 或其他库)中执行此操作,而无需将“之间”移动到我滚动到的 DIV 内部?


为什么不使用锚标签?

<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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AngularJS $anchorScroll 子元素内的 yOffset 的相关文章

随机推荐