如何隐藏滚动间谍中的其他内容而不是滚动到特定位置
Posted
技术标签:
【中文标题】如何隐藏滚动间谍中的其他内容而不是滚动到特定位置【英文标题】：How to hide the other contents in scroll spy instead of scroll to particular position 【发布时间】：2019-07-06 09:23:20 【问题描述】：我有一些内容和一些链接。我在这里使用的是 scrollspy。每当我点击一个链接时，它滚动到特定的 div 和菜单将处于活动状态。但是在这里我需要隐藏其他 div 并显示特定/匹配的 div 而不是滚动。我的意思是在这里而不是滚动我需要隐藏和显示内容.这是更新的代码https://plnkr.co/edit/VvV7T0FCdXirQfMROwi2?p=preview
html
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js'></script>
<script src="script.js"></script>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css'>
<style type="text/css">
.scroll-div
height: 300px;
overflow: scroll;
margin-top: 6.5em;
scroll-behavior: smooth;
.anchor
border: 2px dashed red;
padding: 10px 10px 200px 10px;
.my-fixed-header
position: fixed;
top: 0;
left: 0;
width: 100%;
.my-fixed-header > a
display: inline-block;
margin: 5px 15px;
.html
scroll-behavior: smooth;
</style>
<body ng-app="app">
<div ng-controller="AccordionDemoCtrl">
<div class="my-fixed-header">
<a href="index.html#/#anchorx" ng-click="gotoDiv(x)" ng-repeat="x in [1,2,3,4,5]">
Go to Div x
</a>
<div style="border:1px solid;padding:20px;width:100%;background:yellow;">Header</div>
</div>
<div class="scroll-div">
<div style="border:1px solid;" id="anchorgroup.id" ng-repeat="group in groups | filter:item.value ">
<div class="parents" ng-click="open(group)"> group.title
</div>
group.content
<ul class="childs" ng-show="group.isOpen">
<li ng-repeat="item in group.list">
<span ng-bind-html="item"></span>
</li>
</ul>
</div>
</div>
</div>
</body>
脚本
var app=angular.module('app', ['ui.bootstrap','ngSanitize','angular.filter']);
app.controller('AccordionDemoCtrl', function ($scope,$location,$anchorScroll)
$scope.oneAtATime = true;
$scope.gotoDiv = function(x)
$scope.groups.forEach(a=>
console.log(x);
a.isOpen = true;
);
;
$scope.groups = [
title: 'title 1',
id:'1',
list: ['<i>item1a</i> blah blah',
'item2a',
'item3a',
'item4a',
'item5a',
'item6a',
'item7a'
]
,
title: 'title 1',
id:'1',
list: ['<i>item1a</i> blah blah',
'item2a',
'item3a',
'item4a',
'item5a',
'item6a',
'item7a'
]
,
title: 'title 2',
id:'2',
list: ['<i>item1a</i> blah blah',
'item2a',
'item3a',
'item4a',
'item5a',
'item6a',
'item7a'
]
,
title: 'title 3',
id:'3',
list: ['<i>item1a</i> blah blah',
'item2a',
'item3a',
'item4a',
'item5a',
'item6a',
'item7a'
]
,
title: 'title 4',
id:'4',
list: ['<i>item1a</i> blah blah',
'item2a',
'item3a',
'item4a',
'item5a',
'item6a',
'item7a'
]
,
title: 'title 5',
id:'5',
list: ['<i>item1a</i> blah blah',
'item2a',
'item3a',
'item4a',
'item5a',
'item6a',
'item7a'
]
];
$scope.groups[0].isOpen = true;
);
【问题讨论】：
你的问题是什么？ 我需要隐藏其他 div 并显示特定/匹配的 div 而不是滚动。 这是您的需要，而不是您的问题；）我们不是来做您的工作的。自己尝试并描述确切您遇到的问题。 其实我是 angularjs 的新手，我没有得到这里的逻辑以及如何隐藏除匹配 div 之外的其他 div 你不能用引导程序中的标签来完成这个吗？只是一个建议。 【参考方案1】：您需要设置每个 div 的可见性，然后根据链接点击进行切换...为了使其工作，我们需要将每个对象的可见性状态存储在 $scope.groups 数组中。我们通过在数组的每个对象中引入一个新变量visible 来做到这一点，对于我们需要显示的对象，我们将其设置为默认值 - 其余的可以在单击顶部的链接后显示。
查看下面的工作演示：
var app = angular.module('app', ['ui.bootstrap', 'ngSanitize', 'angular.filter']);
app.controller('AccordionDemoCtrl', function($scope, $location, $anchorScroll)
$scope.oneAtATime = true;
$scope.visibleGrid=-1;
$scope.gotoDiv = function(x)
$scope.visibleGrid=x;
$scope.groups.forEach(a =>
/* console.log(" we got ID:" + x + " & looking it against the ID:" + a.id); */
a.isOpen = true;
);
;
$scope.groups = [
title: 'title 0',
id: '0',
list: ['<i>item1a</i> blah blah',
'item2a',
'item3a',
'item4a',
'item5a',
'item6a',
'item7a'
]
,
title: 'title 1',
id: '1',
list: ['<i>item1a</i> blah blah',
'item2a',
'item3a',
'item4a',
'item5a',
'item6a',
'item7a'
]
,
title: 'title 2',
id: '2',
list: ['<i>item1a</i> blah blah',
'item2a',
'item3a',
'item4a',
'item5a',
'item6a',
'item7a'
]
,
title: 'title 3',
id: '3',
list: ['<i>item1a</i> blah blah',
'item2a',
'item3a',
'item4a',
'item5a',
'item6a',
'item7a'
]
,
title: 'title 4',
id: '4',
list: ['<i>item1a</i> blah blah',
'item2a',
'item3a',
'item4a',
'item5a',
'item6a',
'item7a'
]
,
title: 'title 5',
id: '5',
list: ['<i>item1a</i> blah blah',
'item2a',
'item3a',
'item4a',
'item5a',
'item6a',
'item7a'
]
];
$scope.groups[0].isOpen = true;
);.scroll-div
height: 300px;
overflow: scroll;
margin-top: 6.5em;
scroll-behavior: smooth;
.anchor
border: 2px dashed red;
padding: 10px 10px 200px 10px;
.my-fixed-header
position: fixed;
top: 0;
left: 0;
width: 100%;
.my-fixed-header>a
display: inline-block;
margin: 5px 15px;
.html
scroll-behavior: smooth;
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js'></script>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css'>
<body ng-app="app" >
<div ng-controller="AccordionDemoCtrl">
<div class="my-fixed-header">
<a href="#x" ng-click="gotoDiv(x)" ng-repeat="x in [1,2,3,4,5]">
Go to Div x
</a>
<div style="border:1px solid;padding:20px;width:100%;background:yellow;">Header</div>
</div>
<div class="scroll-div">
<div style="border:1px solid;" id="anchorgroup.id" ng-repeat="group in groups | filter:item.value ">
<ng-container ng-if='visibleGrid == group.id || visibleGrid == -1'>
<div class="parents" ng-click="open(group)"> group.title
</div>
group.content
<ul class="childs" ng-show="group.isOpen">
<li ng-repeat="item in group.list">
<span ng-bind-html="item"></span>
</li>
</ul>
</ng-container>
</div>
</div>
</div>
</body>更新：（用户评论后）默认显示所有数据，然后在特定点击后，只有相关部分将保持可见
更新 #2：（在用户的第二条评论之后）没有向 JSON 数据添加任何内容的相同结果
【讨论】：
谢谢.. 是否可以在加载时加载所有数据.. 现在它只显示第一个数据 现在检查...这是您要找的吗？ 默认情况下，可见标志设置为true...如果适合您，请将答案标记为已接受 是否可以不修改JSON中的任何内容...因为在JSON中不会有可见的列 @carreankush，当然可以，请检查更新的附加答案以上是关于如何隐藏滚动间谍中的其他内容而不是滚动到特定位置的主要内容，如果未能解决你的问题，请参考以下文章
如何滚动到scrollview内recyclerview中的特定位置？
如何将 UIView 锚定到屏幕上的特定位置并在滚动时将其保留在那里