单击按钮时的角度滚动 div [英] angular Scroll div on button click

查看：19
本文介绍了单击按钮时的角度滚动 div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我只是在学习 angular 并且有一个问题，我就是不知道如何解决它.

我正在努力实现以下目标.

<小时>

标签 A/标签 B/标签 C

................................

固定高度容器中的内容

<小时>

当我单击一个选项卡时，一些内容通过 json 加载并显示在容器中.由于内容很多，我得到了一个滚动条.

我现在想做的是:存储每个 Tab 的 scrollTop 位置，以便您在切换 Tab 时可以继续阅读离开的位置.

目前我在内容 div 上有一个指令，每当 div 滚动时就会触发，并将 scrollTop 位置存储在一个数组中，与当前活动的选项卡相关.

app.directive("scrollPosition", function(){返回{限制:'A'，链接:函数(范围，元素){element.bind("scroll", function(){scope.scrollPosition[scope.tab.categoryIndex]=element.scrollTop();});}}})

到目前为止，这是有效的.

但我不知道如何使用这个存储的 ScrollTop 值在我点击其中一个标签时将 div 设置到那个位置.

正确的角度方式是什么?

使用 ng-click 选项卡然后滚动 div?在指令中使用 $watch 之类的东西来查看点击了哪个选项卡?

非常感谢帮助，因为我只能找到滚动整个文档的示例，这很容易解决.但我只是不知道如何获得标签按钮和 div 之间的这种关系.

谢谢马库斯

解决方案

查看 $anchorScroll.您可以在调用该函数之前对其设置 yOffset.

$anchorScroll.yOffset = 122;$anchorScroll();

https://docs.angularjs.org/api/ng/service/$anchorScroll

更新:

所以我解决了这个问题.我的第一个回答太仓促了.

这是 plnkr 的链接(虽然也嵌入到帖子中):http://embed.plnkr.co/kwPkFDfyJctfPRFPPLyk

滚动第一个标签，点击第二个标签，然后回到第一个标签.

我向指令的隔离范围添加了一个 pos 变量，并从主控制器传入了范围变量.通过这种方式，指令可以在双向绑定变量上设置滚动位置.下一次单击选项卡时，该指令通过其 scope.pos 变量将其元素上的滚动位置设置为上次滚动到的位置.希望这会有所帮助！

(function() {'使用严格';var app = angular.module('TabsApp', []).controller('TabsCtrl', ['$scope', function($scope) {$scope.tabs = [{"title": '一个',"url": 'one.tpl.html',位置":0}, {"title": '二',"url": 'two.tpl.html',位置":0}, {"title": '三',"url": 'three.tpl.html',位置":0}];$scope.$watch('tabs', function(val) {console.log("耶！！！它正在工作！Val=" + val[0].pos);}， 真的);$scope.currentTab = $scope.tabs[0];$scope.onClickTab = 函数(标签){$scope.currentTab = 标签；};$scope.isActiveTab = 函数(tabUrl){返回 tabUrl == $scope.currentTab.url;};}]);app.directive("scrollPosition", function() {返回 {限制:'A'，范围: {位置:="},转置:假，链接:函数(范围，元素){element[0].onscroll = 函数(){scope.pos = element[0].scrollTop;控制台日志(范围.位置)；范围.$应用()；};element[0].scrollTop = scope.pos;}};});})();

ul {列表样式:无；填充:0；边距:0；}李{向左飘浮;边框:1px 实心 #000；边框底部宽度:0；边距:3px 3px 0px 3px；填充:5px 5px 0px 5px；背景颜色:#CCC；颜色:#696969；}#mainView {边框:1px纯黑色；清楚:两者；填充:0 1em；}#viewOne, #viewTwo, #viewThree {溢出:滚动；高度:200px；}.积极的 {背景颜色:#FFF；颜色:#000；}

<头><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"/><身体><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}}</里><div id="mainView"><div ng-include="currentTab.url"></div>{{currentTab.pos}}

<script type="text/ng-template" id="one.tpl.html"><div id="viewOne" 滚动位置 pos="currentTab.pos"><h1>视图一</h1><p>Praesent id metus massa，ut blandit odio.Proin quis Tortor orci.Etiam at risus et justo dignissim congue.Donec congue lacinia dui，一种porttitor lectus condimentum laoreet.Nunc.

<p>Praesent id metus massa，ut blandit odio.Proin quis Tortor orci.Etiam at risus et justo dignissim congue.Donec congue lacinia dui，一种porttitor lectus condimentum laoreet.Nunc.

<p>Praesent id metus massa，ut blandit odio.Proin quis Tortor orci.Etiam at risus et justo dignissim congue.Donec congue lacinia dui，一种porttitor lectus condimentum laoreet.Nunc.

<p>Praesent id metus massa，ut blandit odio.Proin quis Tortor orci.Etiam at risus et justo dignissim congue.Donec congue lacinia dui，一种porttitor lectus condimentum laoreet.Nunc.

<p>Praesent id metus massa，ut blandit odio.Proin quis Tortor orci.Etiam at risus et justo dignissim congue.Donec congue lacinia dui，一种porttitor lectus condimentum laoreet.Nunc.

<p>Praesent id metus massa，ut blandit odio.Proin quis Tortor orci.Etiam at risus et justo dignissim congue.Donec congue lacinia dui，一种porttitor lectus condimentum laoreet.Nunc.

<p>Praesent id metus massa，ut blandit odio.Proin quis Tortor orci.Etiam at risus et justo dignissim congue.Donec congue lacinia dui，一种porttitor lectus condimentum laoreet.Nunc.

<p>Praesent id metus massa，ut blandit odio.Proin quis Tortor orci.Etiam at risus et justo dignissim congue.Donec congue lacinia dui，一种porttitor lectus condimentum laoreet.Nunc.

<p>Praesent id metus massa，ut blandit odio.Proin quis Tortor orci.Etiam at risus et justo dignissim congue.Donec congue lacinia dui，一种porttitor lectus condimentum laoreet.Nunc.

<script type="text/ng-template" id="two.tpl.html"><div id="viewTwo" 滚动位置 pos="currentTab.pos"><h1>视图二</h1><p>Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sat amet arcu.类 aptent taciti socialsqu.</p>

<script type="text/ng-template" id="three.tpl.html"><div id="viewThree" 滚动位置 pos="currentTab.pos"><h1>视图三</h1><p>在pellentesque faucibus前庭.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 sat amet阿库.类 aptent taciti socialsqu.</p>

</html>

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

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆