Javascript Girl
  1. Javascript Girl
  3. AngularJS $ anchorScroll yOffset dans un élément enfant
Intereting Posts
Comment écrire un sélecteur jQuery avec plusieurs: eq's en expression unique? Toute façon de détecter si une console de navigateur est capable de créer des couleurs? Définissez l'image de fond css3 avec jquery Algorithme qui adapte (résolvent) les équations complexes (fonction implicite f (x, y)) Changements de position de rotation du marqueur googleMap Mise à jour d'un événement en faisant glisser / déposer le calendrier complet – Javascript Vidéo HTML5 – Afficher / masquer les contrôles par programme Entrée d'étiquette HTML de type = "nombre" et séparateur décimal basé sur la culture Ember Data ne peut pas lire la propriété 'async' de undefined Stream getUserMedia dans un serveur Icecast? Comment puis-je cliquer par programme sur un lien avec javascript? Trouvez l'élément html le plus proche de la position (relative ou absolue) Test ne fonctionne pas sur karma / jasmine / require.js 'Il n'y a pas d'horodatage pour * lib *!' Erreur Comment faire div glisser de droite à gauche Envoi de pièces jointes avec Meteor.js (package de messagerie et / ou nodemailer ou autrement)

AngularJS $ anchorScroll yOffset dans un élément enfant

D'après ce que je comprends $ anchorScroll, yOffset est impossible dans un élément enfant: "Pour que yOffset fonctionne correctement, le défilement doit avoir lieu sur la racine du document et non sur un élément enfant". Https://docs.angularjs.org/api/ng/service/ $ anchorScroll

Exemple (modifié à partir des docs AngularJS): je veux cliquer sur un lien et inclure le mot "entre" ci-dessus à quoi se déplace.

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

Existe-t-il une bonne façon de le faire dans AngularJS (de préférence sans bibliothèques jQuery ou supplémentaires) sans bouger "entre" vers l'intérieur du DIV auquel je me déplace?

Pourquoi n'utilisez-vous pas une étiquette d'ancrage? 

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