上按一下按钮角滚动的div [英] angular Scroll div on button click
问题描述
我刚学的角度，并有一个问题，我只是无法弄清楚如何解决它。
我想实现以下。
选项卡/标签B /扣C
...............
内容在固定高度容器
当我点击一个标签，有些内容是通过JSON加载并在容器中显示。自从很多内容我得到一个滚动条。
我想现在要做的是：存放scrollTop的位置为每个标签，这样你就可以继续读书，你离开的时候你切换标签
。目前，我对内容的div指令，触发每当DIV获取滚动，并存储scrollTop的位置在数组中，涉及到当前活动的选项卡。
app.directive（的scrollPosition功能（）{
返回{
限制：'A'，
链接：功能（范围，元素）{
element.bind（滚动功能（）{
scope.scrollPosition [scope.tab.categoryIndex] = element.scrollTop（）; }）;
}
}
}）
此工作至今。
但我不知道如何使用这个存储scrollTop的值到div设置到该位置，当我点击选项卡中的一个。
请告诉我正确的角度办法？
在标签使用NG单击，然后滚动股利？
使用像一个手表$指令里面看到单击该选项卡？
帮助将非常AP preciated，因为我只能找到例子，整个文件已滚动，这是很容易解决的问题。但我只是不知道如何让标签按钮和DIV之间的这种关系。
谢谢
马库斯
看到$ anchorScroll。您可以设置一个yOffset上之前调用该函数。
$ anchorScroll.yOffset = 122;
$ anchorScroll（）;
https://docs.angularjs.org/api/ng/service/ $ anchorScroll
更新：
所以，我解决了这个。我的第一个答案是操之过急。
下面是plnkr（也嵌入到后虽然）的链接： http://embed.plnkr.co/ kwPkFDfyJctfPRFPPLyk
滚动第一个选项卡，单击第二个选项卡，然后回到第一位。
我添加了一个 POS 变量的指令的分离范围，从主控制器的范围变量通过。通过这种方式，指令可以设定在双向绑定变量的滚动位置。该选项卡上点击下一次，该指令将它的元素到最后滚动其滚动位置通过其 scope.pos 变量来定位。希望这有助于！
（函数（）{\r
使用严格的;\r
\r
VAR应用= angular.module（'TabsApp'，[]）\r
.controller（'TabsCtrl'，['$范围'，函数（$范围）{\r
\r
$ scope.tabs = [{\r
头衔：'一'，\r
URL：'one.tpl.html'，\r
POS：0\r
}，{\r
头衔：两课，\r
URL：'two.tpl.html'，\r
POS：0\r
}，{\r
头衔：三化，\r
URL：'three.tpl.html'，\r
POS：0\r
}];\r
\r
$范围。$腕表（'标签'，函数（VAL）{\r
的console.log（耶！它的工作瓦尔！=+ VAL [0] .POS）;\r
}，真正的）;\r
\r
\r
$ scope.currentTab = $ scope.tabs [0];\r
\r
$ scope.onClickTab =功能（标签）{\r
$ scope.currentTab =标签;\r
};\r
\r
$ scope.isActiveTab =功能（tabUrl）{\r
返回tabUrl == $ scope.currentTab.url;\r
};\r
}]）;\r
\r
app.directive（的scrollPosition功能（）{\r
返回{\r
限制：'A'，\r
范围： {\r
POS：=\r
}，\r
transclude：假的，\r
链接：功能（范围，元素）{\r
\r
元素[0] = .onscroll功能（）{\r
scope.pos =元素[0] .scrollTop;\r
的console.log（scope.pos）;\r
。范围$适用（）;\r
};\r
\r
\r
元素[0] .scrollTop = scope.pos;\r
}\r
};\r
}）;\r
\r
}）（）; \r
UL {\r
列表样式：无;\r
填充：0;\r
保证金：0;\r
}\r
\r
李{\r
浮动：左;\r
边框：1px的固体＃000;\r
下边框宽度：0;\r
保证金：的3px的3px 0像素的3px;\r
填充：5像素为5px 0像素为5px;\r
背景色：#CCC;\r
颜色：＃696969;\r
}\r
\r
#mainView {\r
边框：1px的纯黑色;\r
明确：两者;\r
填充：0 1EM;\r
\r
}\r
\r
#viewOne，#viewTwo，#viewThree {\r
溢出：滚动;\r
高度：200像素;\r
}\r
\r
。主动{\r
背景色：#FFF;\r
颜色：＃000;\r
} \r
＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML和GT;\r
\r
＆LT; HEAD＆GT;\r
＆所述;脚本数据需要=angular.js@*数据semver =1.3.15SRC =的https：//$c$c.angularjs.org/1.3.15/angular.js＆GT;＆下; / SCRIPT＆GT;\r
＆所述; SCRIPT SRC =的script.js＆GT;＆下; /脚本＆GT;\r
＆LT;链接rel =stylesheet属性HREF =style.css文件/＆GT;\r
\r
＆LT; /头＆GT;\r
\r
＆LT;身体GT;\r
＆LT; DIV NG-应用=TabsApp＆GT;\r
＆LT; DIV ID =标签NG控制器=TabsCtrl＆GT;\r
＆LT; UL＆GT;\r
＆LT;李NG重复=标签在标签中NG-CLASS ={活跃：isActiveTab（tab.url）}NG点击=onClickTab（标签）＆GT; {{tab.title}}＆LT; /李＆GT;\r
＆LT; / UL＆GT;\r
＆LT; DIV ID =MAINVIEW＆GT;\r
＆LT; DIV NG-包括=currentTab.url＆GT;＆LT; / DIV＆GT;\r
{{currentTab.pos}}\r
＆LT; / DIV＆GT;\r
＆LT;脚本类型=文/ NG-模板ID =one.tpl.html＆GT;\r
＆LT; DIV ID =viewOne滚动位置pos =currentTab.pos＆GT;\r
＆LT; H1＆gt;查看吲; / H1＆GT;\r
＆LT; P＆GT; Praesent ID metus马萨，UT blandit奥迪奥。 PROIN QUIS tortor奥奇。 Etiam在risus等胡斯托dignissim congue。 Donec congue lacinia酒后驾车，一个porttitor lectus condimentum laoreet。 Nunc公司＆所述; / P＆GT;\r
＆LT; P＆GT; Praesent ID metus马萨，UT blandit奥迪奥。 PROIN QUIS tortor奥奇。 Etiam在risus等胡斯托dignissim congue。 Donec congue lacinia酒后驾车，一个porttitor lectus condimentum laoreet。 Nunc公司＆所述; / P＆GT;\r
＆LT; P＆GT; Praesent ID metus马萨，UT blandit奥迪奥。 PROIN QUIS tortor奥奇。 Etiam在risus等胡斯托dignissim congue。 Donec congue lacinia酒后驾车，一个porttitor lectus condimentum laoreet。 Nunc公司＆所述; / P＆GT;\r
＆LT; P＆GT; Praesent ID metus马萨，UT blandit奥迪奥。 PROIN QUIS tortor奥奇。 Etiam在risus等胡斯托dignissim congue。 Donec congue lacinia酒后驾车，一个porttitor lectus condimentum laoreet。 Nunc公司＆所述; / P＆GT;\r
＆LT; P＆GT; Praesent ID metus马萨，UT blandit奥迪奥。 PROIN QUIS tortor奥奇。 Etiam在risus等胡斯托dignissim congue。 Donec congue lacinia酒后驾车，一个porttitor lectus condimentum laoreet。 Nunc公司＆所述; / P＆GT;\r
＆LT; P＆GT; Praesent ID metus马萨，UT blandit奥迪奥。 PROIN QUIS tortor奥奇。 Etiam在risus等胡斯托dignissim congue。 Donec congue lacinia酒后驾车，一个porttitor lectus condimentum laoreet。 Nunc公司＆所述; / P＆GT;\r
＆LT; P＆GT; Praesent ID metus马萨，UT blandit奥迪奥。 PROIN QUIS tortor奥奇。 Etiam在risus等胡斯托dignissim congue。 Donec congue lacinia酒后驾车，一个porttitor lectus condimentum laoreet。 Nunc公司＆所述; / P＆GT;\r
＆LT; P＆GT; Praesent ID metus马萨，UT blandit奥迪奥。 PROIN QUIS tortor奥奇。 Etiam在risus等胡斯托dignissim congue。 Donec congue lacinia酒后驾车，一个porttitor lectus condimentum laoreet。 Nunc公司＆所述; / P＆GT;\r
＆LT; P＆GT; Praesent ID metus马萨，UT blandit奥迪奥。 PROIN QUIS tortor奥奇。 Etiam在risus等胡斯托dignissim congue。 Donec congue lacinia酒后驾车，一个porttitor lectus condimentum laoreet。 Nunc公司＆所述; / P＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; / SCRIPT＆GT;\r
＆LT;脚本类型=文/ NG-模板ID =two.tpl.html＆GT;\r
＆LT; DIV ID =viewTwo滚动位置pos =currentTab.pos＆GT;\r
＆LT; H1＆gt;查看两个＆LT; / H1＆GT;\r
＆LT; P＆GT; Curabitur vulputate，ligula lacinia scelerisque tempor，拉克丝拉克丝ornare赌注，AC egestas EST乌仁娜坐阿梅德arcu。类aptent taciti sociosqu＆下; / P＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; / SCRIPT＆GT;\r
＆LT;脚本类型=文/ NG-模板ID =three.tpl.html＆GT;\r
＆LT; DIV ID =viewThree滚动位置pos =currentTab.pos＆GT;\r
＆LT; H1＆gt;查看三＆LT; / H1＆GT;\r
＆所述; P＆gt;在pellentesque faucibus前庭。法无于法无胡斯托，eget luctus tortor。法无facilisi。 DUIS aliquet egestas普鲁斯在blandit。 Curabitur vulputate，ligula lacinia scelerisque tempor，拉克丝拉克丝ornare赌注，AC egestas EST乌仁娜坐阿梅德\r
arcu。类aptent taciti sociosqu＆下; / P＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; / SCRIPT＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; /身体GT;\r
\r
＆LT; / HTML＆GT; \r
I'm just learning angular and have a problem i just can't figure out how to solve it.
I'm trying to achieve the following.
Tab A / Tab B / Tab C
.................................
Content in a fixed height Container
When i click a tab, some content is loaded via json and displayed in the container. Since its a lot of content i get a scrollbar.
What i want to do now is: Store the scrollTop Position for each Tab, so you can continue reading where you left when you switch tabs.
At the moment i have a directive on the content div, that triggers whenever the div gets scrolled, and stores the scrollTop Position in an array, related to the tab that is currently active.
app.directive("scrollPosition", function(){
return{
restrict: 'A',
link: function(scope , element){
element.bind("scroll", function(){
scope.scrollPosition[scope.tab.categoryIndex]=element.scrollTop();
});
}
}
})
This works so far.
But i have no clue how to use this stored ScrollTop Value to set the div to that position when i click of one of the tabs.
Whats the proper angular way?
Using an ng-click on the tabs and then scroll the div? Using something like a $watch inside the directive to see which tab is clicked?
Help would be much appreciated, since i could only find examples where the whole document was scrolled, which is easy to address. But i just don't know how to get this relationship between the tab buttons and the div.
Thanks Markus
Look into $anchorScroll. You can set a yOffset on it before call the function.
$anchorScroll.yOffset = 122;
$anchorScroll();
https://docs.angularjs.org/api/ng/service/$anchorScroll
Update:
So I solved this. My first answer was too hasty.
Here is a link to plnkr(also embedded into post though): http://embed.plnkr.co/kwPkFDfyJctfPRFPPLyk
Scroll the first tab, click on the second tab, then back in the first.
I added a pos variable to the isolate scope of the directive and passed in scope variables from the main controller. This way the directive can set the scroll position on a two-way bound variable. The next time the tab is clicked on, the directive sets its the scroll position on its element to the last scrolled to position via its scope.pos variable. Hope this helps!
(function() {
'use strict';
var app = angular.module('TabsApp', [])
.controller('TabsCtrl', ['$scope', function($scope) {
$scope.tabs = [{
"title": 'One',
"url": 'one.tpl.html',
"pos": 0
}, {
"title": 'Two',
"url": 'two.tpl.html',
"pos": 0
}, {
"title": 'Three',
"url": 'three.tpl.html',
"pos": 0
}];
$scope.$watch('tabs', function(val) {
console.log("Yay!!! It's working! Val=" + val[0].pos);
}, true);
$scope.currentTab = $scope.tabs[0];
$scope.onClickTab = function(tab) {
$scope.currentTab = tab;
};
$scope.isActiveTab = function(tabUrl) {
return tabUrl == $scope.currentTab.url;
};
}]);
app.directive("scrollPosition", function() {
return {
restrict: 'A',
scope: {
pos: "="
},
transclude: false,
link: function(scope, element) {
element[0].onscroll = function() {
scope.pos = element[0].scrollTop;
console.log(scope.pos);
scope.$apply();
};
element[0].scrollTop = scope.pos;
}
};
});
})();
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
float: left;
border: 1px solid #000;
border-bottom-width: 0;
margin: 3px 3px 0px 3px;
padding: 5px 5px 0px 5px;
background-color: #CCC;
color: #696969;
}
#mainView {
border: 1px solid black;
clear: both;
padding: 0 1em;
}
#viewOne, #viewTwo, #viewThree {
overflow: scroll;
height: 200px;
}
.active {
background-color: #FFF;
color: #000;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div ng-app="TabsApp">
<div id="tabs" ng-controller="TabsCtrl">
<ul>
<li ng-repeat="tab in tabs" ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)">{{tab.title}}</li>
</ul>
<div id="mainView">
<div ng-include="currentTab.url"></div>
{{currentTab.pos}}
</div>
<script type="text/ng-template" id="one.tpl.html">
<div id="viewOne" scroll-position pos="currentTab.pos">
<h1>View One</h1>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
</div>
</script>
<script type="text/ng-template" id="two.tpl.html">
<div id="viewTwo" scroll-position pos="currentTab.pos">
<h1>View Two</h1>
<p>Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu.</p>
</div>
</script>
<script type="text/ng-template" id="three.tpl.html">
<div id="viewThree" scroll-position pos="currentTab.pos">
<h1>View Three</h1>
<p>In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet
arcu. Class aptent taciti sociosqu.</p>
</div>
</script>
</div>
</div>
</body>
</html>
这篇关于上按一下按钮角滚动的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
