使用 AngularJS 指令更改 div 在 div 内的滚动位置
Changing the scroll position of a div inside a div using AngularJS directives
我目前正在开发一个 Angular 应用程序,该应用程序具有固定高度的嵌套 div,其中填充有文本。我想使用外部 div 上的 table 内容来导航内部嵌套 div 中的文本。文本和内容的 table 都在使用 ng-repeat
动态加载。这是我的 html...
<div class="text-nav-main">
<ul class="nav-ul">
<li ng-repeat="item in text.obj" >
<span scroll-on-click href="#{{item.id}}" >{{item.title}}</span>
<ul class="nav-ul">
<li ng-repeat="art in item.article">
<span scroll-on-click href="#{{art.id}}" >{{art.artNum}}</span>
<ul class="nav-ul">
<li ng-repeat="sub in art.subArt">
<span scroll-on-click href="#{{sub.id}}" >{{sub.subArtNum}}</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="text-main-window">
<div ng-repeat="item in text.obj">
<h3 id="{{item.id}}">{{item.title}}</h3>
<br/>
<div ng-repeat="art in item.article">
<h4 id="{{art.id}}">{{art.artNum}}</h4>
<br/>
<div ng-repeat="subArt in art.subArt">
<h5 id="{{subArt.id}}" >{{subArt.subArtNum}}</h5>
<div ng-repeat="para in subArt.paragraph">
<p>{{para.text}}</p>
</div>
<a ui-sref="rulebook.detail({detail:rules.ruleNumber})"
class="rule-style"
ng-repeat="rules in subArt.rule">
{{rules.ruleNumber}} {{rules.ruleName}}<br/>
</a>
<br/>
</div>
</div>
</div>
</div>
这是我一直在尝试使用的指令 ScrollTo function in AngularJS
(function(){
'use strict';
angular.module('ganeshaApp')
.directive('scrollOnClick', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var idToScroll = attrs.href;
element.on('click', function() {
var $target;
if (idToScroll) {
$target = $(idToScroll);
} else {
$target = element;
}
$(".text-main-window").animate({scrollTop: $target.offset().top }, "slow");
});
}
}
});
})();
目前 link 正在带我到嵌套 div 的各个地方。当我点击同一个 link 两次时,它会把我带到两个不同的点。如果我在单击事件上执行 $target.offset().top 的 console.log,它会给出每个元素的正确位置,但是当我打开动画功能时,一切都会变得一团糟。如果我缺少一个简单的解决方案,我深表歉意。我还有很多东西要学,我就是想不通这一点。预先感谢您的回复。
刚刚找到答案here. Although it's not marked as an answered question, it should be. Thanks very much AaronS。
只需要从要滚动到的元素的顶部位置减去嵌套 div 的顶部位置,然后加回 div 的 scrollTop 位置。我在最终值中添加了 20 像素,只是为了给文本留一点边距。
(function(){
'use strict';
angular.module('ganeshaApp')
.directive('scrollOnClick', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var idToScroll = attrs.href;
element.on('click', function() {
var $target;
if (idToScroll) {
$target = $(idToScroll);
} else {
$target = element;
}
$(".text-main-window").animate({
scrollTop: $target.position().top -
$(".text-main-window").position().top +
$(".text-main-window").scrollTop() - 20}, "slow");
});
}
}
});
})();
希望这对其他人有帮助。
我目前正在开发一个 Angular 应用程序,该应用程序具有固定高度的嵌套 div,其中填充有文本。我想使用外部 div 上的 table 内容来导航内部嵌套 div 中的文本。文本和内容的 table 都在使用 ng-repeat
动态加载。这是我的 html...
<div class="text-nav-main">
<ul class="nav-ul">
<li ng-repeat="item in text.obj" >
<span scroll-on-click href="#{{item.id}}" >{{item.title}}</span>
<ul class="nav-ul">
<li ng-repeat="art in item.article">
<span scroll-on-click href="#{{art.id}}" >{{art.artNum}}</span>
<ul class="nav-ul">
<li ng-repeat="sub in art.subArt">
<span scroll-on-click href="#{{sub.id}}" >{{sub.subArtNum}}</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="text-main-window">
<div ng-repeat="item in text.obj">
<h3 id="{{item.id}}">{{item.title}}</h3>
<br/>
<div ng-repeat="art in item.article">
<h4 id="{{art.id}}">{{art.artNum}}</h4>
<br/>
<div ng-repeat="subArt in art.subArt">
<h5 id="{{subArt.id}}" >{{subArt.subArtNum}}</h5>
<div ng-repeat="para in subArt.paragraph">
<p>{{para.text}}</p>
</div>
<a ui-sref="rulebook.detail({detail:rules.ruleNumber})"
class="rule-style"
ng-repeat="rules in subArt.rule">
{{rules.ruleNumber}} {{rules.ruleName}}<br/>
</a>
<br/>
</div>
</div>
</div>
</div>
这是我一直在尝试使用的指令 ScrollTo function in AngularJS
(function(){
'use strict';
angular.module('ganeshaApp')
.directive('scrollOnClick', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var idToScroll = attrs.href;
element.on('click', function() {
var $target;
if (idToScroll) {
$target = $(idToScroll);
} else {
$target = element;
}
$(".text-main-window").animate({scrollTop: $target.offset().top }, "slow");
});
}
}
});
})();
目前 link 正在带我到嵌套 div 的各个地方。当我点击同一个 link 两次时,它会把我带到两个不同的点。如果我在单击事件上执行 $target.offset().top 的 console.log,它会给出每个元素的正确位置,但是当我打开动画功能时,一切都会变得一团糟。如果我缺少一个简单的解决方案,我深表歉意。我还有很多东西要学,我就是想不通这一点。预先感谢您的回复。
刚刚找到答案here. Although it's not marked as an answered question, it should be. Thanks very much AaronS。
只需要从要滚动到的元素的顶部位置减去嵌套 div 的顶部位置,然后加回 div 的 scrollTop 位置。我在最终值中添加了 20 像素,只是为了给文本留一点边距。
(function(){
'use strict';
angular.module('ganeshaApp')
.directive('scrollOnClick', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var idToScroll = attrs.href;
element.on('click', function() {
var $target;
if (idToScroll) {
$target = $(idToScroll);
} else {
$target = element;
}
$(".text-main-window").animate({
scrollTop: $target.position().top -
$(".text-main-window").position().top +
$(".text-main-window").scrollTop() - 20}, "slow");
});
}
}
});
})();
希望这对其他人有帮助。