AngularJS $ anchorScroll yOffset w elemencie podrzędnym

Z tego co rozumiem $ anchorScroll yOffset jest niemożliwe w elemencie child: "Aby yOffset działał poprawnie, przewijanie powinno odbywać się w katalogu głównym dokumentu, a nie w elemencie potomnym." https://docs.angularjs.org/api/ng/service/ $ anchorScroll

Przykład (zmodyfikowany z dokumentów AngularJS): Chcę kliknąć łącze i dołączyć słowo "między" powyżej tego, do czego jest przewijane.

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

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

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

Czy istnieje dobry sposób, aby zrobić to w ciągu angularjs (pref nie ma jQuery ani dodatkowych bibliotek) bez przenoszenia "pomiędzy" do wnętrza DIV, do którego przewijam?

Źródło

2015-05-30 Sean

Dlaczego nie używasz znacznika kotwicy?

<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>

Źródło

2017-03-24 15:08:52 Alec

AngularJS $ anchorScroll yOffset w elemencie podrzędnym

Odpowiedz

Powiązane problemy