Javascript AngularJS+;离子型:标签取决于滚动位置
我有一个Javascript AngularJS+;离子型:标签取决于滚动位置,javascript,angularjs,scroll,ionic-framework,Javascript,Angularjs,Scroll,Ionic Framework,我有一个离子内容可滚动的项目和一些锚,可以跳转到某些位置。 在离子内容之外,我有一个按钮,可以跳转到下一个位置。 例如: Jump to Position2 **Position1** Text Text Text Text **Position2** Text Text Text 快速解决方案是在滚动完成时将侦听器连接到: <ion-content delegate-handle="scroll1" on-scroll-complete="setTextForScroll()">
离子内容
可滚动的项目和一些锚,可以跳转到某些位置。
在离子内容
之外,我有一个按钮,可以跳转到下一个位置。
例如:
Jump to Position2
**Position1**
Text
Text
Text
Text
**Position2**
Text
Text
Text
快速解决方案是在滚动完成时将侦听器连接到:
<ion-content delegate-handle="scroll1" on-scroll-complete="setTextForScroll()">
但这是一个快速的解决办法。它不会在不同的屏幕大小或动态变化的屏幕上工作
模板
我的下一个想法是执行一个属性指令,以这种方式将所有标记的元素和渲染滚动中的位置添加到一个数组中,并计算此时哪个元素最接近滚动位置
但是现在我在获取渲染DOM元素到控制器和
我想也许我的方法是复杂的:/
还有想法?非常感谢你的帮助!!
听起来有点简单。。。滚动->标签。完成:D
Cheers AucklandDB如果您想定义一个可以滚动到的锚,只需在文档中您想要到达的位置放置类似的内容即可
<a name="anchor"></a>
你可以用离子法,检查 在html中:
<ion-content delegate-handle="myPageDelegate">
<a ng-click="scrollTo('Contact')"></a>
<div id="Contact">
//some content goes here
</div>
<a href="#anchor">Go to anchor!</a>
<ion-content delegate-handle="myPageDelegate">
<a ng-click="scrollTo('Contact')"></a>
<div id="Contact">
//some content goes here
</div>
myApp.controller('MyCtrl', function ($scope,$ionicScrollDelegate,$location) {
$scope.scrollTo = function(target){
$location.hash(target); //set the location hash
var handle = $ionicScrollDelegate.$getByHandle('myPageDelegate');
handle.anchorScroll(true); // 'true' for animation
};
});