$ionicScrollDelegate : scrolling to a specific DOM element

ionic-v1
1

Hello guys,

It’s been a long time since I last visited this forum. I have an issue regarding the ionic scroll delegate. I wrote a simple directive that scrolls to a dom element whenever the user clicks on it . Here is my directive

myapp.directive('scrolltop', 
    [
        '$ionicScrollDelegate',
        function(
            $ionicScrollDelegate
            ) {
                return {
                    link: function (scope, element, attrs) {
                        element.on('click', function (event) {
                            //  - (element.height() +13)  + 70
                            // Also testes scrollBy
                            $ionicScrollDelegate.scrollTo(0, element.offset().top, true);
                        });
                    }
                };
            }
    ]
);

So, a very simple directive. But this code scrolls way too much below when the item is clicked. Also, if applied on a text input, the cursor is still blinking even though the input is not displayed (… as it has scrolled too much and the dome element is not even visible). What is the correct way to do that ?

Not sure if you guys understand but it would be very nice to have a scrollToElement on the $ionicScrollDelegate object.

Hakan.

3 Likes
2

in this particular issue,have some result of testing that i want to share :slight_smile:

  1. detect the position of the element using $ionicPosition.position(angular.element(YOUR ELEMENT)); but you must detect its position before the user scroll (because the position will be changed within the scrolling action) .
  2. My simple solution without using directive :
    .controller(‘Ctrl’, function($scope,$ionicScrollDelegate,$ionicPosition,$timeout) {
    // waiting for element to be well rendered and detect a specific element
    $timeout(function()
    {
    var p2 = document.querySelector(’.p2’);
    $scope.quotePosition = $ionicPosition.position(angular.element(p2));
    }, 200);
    //this function is used to scroll to the element ‘p2’
    $scope.ScrollingToP2 = function()
    {//don’t forget to set delegate-handle to detect witch scroll-container to use
    //ex:
    $ionicScrollDelegate.$getByHandle(‘mainScroll’).scrollTo(0,$scope.quotePosition.top, true);
    }

i hope that this will help you :blush:
OR take a tour around anchorscroll (anchorScroll([shouldAnimate]))
http://ionicframework.com/docs/api/service/$ionicScrollDelegate/

1 Like