Scroll content inside Slide Box [FIXED][UPDATED]

ionic-v1
1

I finally got fixed a problem that other peoples here has faced. If I have a Slide Box, and inside this slide box I have some scrollable content (as a list or a vertical scroll), the handling of scroll and slide is so hard that makes dificult to use.

I resolved this by adding a limit to the scroll to work before activate the slide. The attribute limitslide is the limit to the slide left or right is inactive before be active. Follow this guide:

[UPDATE]

Now it’s working too with a left side menu. I disable the drag from the side menu and enable it only if the user slide from screen’s border.

This is the view

<ion-slide-box  mainslidebox limitslide="100">
    <ion-slide>
    //Scrollable content
    </ion-slide>
    <ion-slide>
    //Scrollable content
    </ion-slide>
</ion-slide-box>

This is the controller’s Javascript

            $scope.init = function () {
                //Disable slide of slidebox
                $timeout(function () {
                    $ionicSlideBoxDelegate.enableSlide(false);
                }, 100);

                //Disable drag of side menu
                $timeout(function(){
                    $ionicSideMenuDelegate.canDragContent(false);
                }, 100);

                $scope.destaque = mock.destaques;
            };

Create this directive

    //This takes care of the slidebox
    angular.directive('mainslidebox', function ($ionicGesture, $ionicSlideBoxDelegate) {
        return {
            restrict: 'A',
            link: function (scope, elem, attrs) {
                var limit = attrs.limitslide;
                $ionicGesture.on(
                        "dragleft",
                        function (ev) {
                            if (ev.gesture.deltaX.toFixed(0) < (limit * -1)) {
                                console.log('Esquerda');
                                $ionicSlideBoxDelegate.enableSlide(true);
                            }
                        },
                        elem
                        );

                "dragright",
                 function (ev) {
                          if (ev.gesture.startEvent.center.pageX > 50) {
                              $ionicSideMenuDelegate.canDragContent(false);
                                    if (ev.gesture.deltaX.toFixed(0) > (limitslide * 1)) {
                                        console.log('Direita');
                                        $ionicSlideBoxDelegate.enableSlide(true);
                                    }
                                } else {
                                    $ionicSideMenuDelegate.canDragContent(true);
                                }
                            },
                            elem
                            );

                $ionicGesture.on(
                        "release",
                        function (ev) {
                            console.log('Release');
                            $ionicSlideBoxDelegate.enableSlide(false);
                        },
                        elem
                        );
            }
        };
    })

I hope this help other people with same problem. This could be added to the Ionic project (just a suggestion :slight_smile: )

4 Likes
2

Thanks for posting this. I had to disable sliding in favor of arrows, but may experiment with this to add it back.

3

thanks @kalilmaciel, I have same problem with content scroll inside slidebox. I will try it… :slight_smile:

4

I did manage to get this to work, after a few fixes, so I’ve copied what I used in my controller below. But after testing it I was concerned about how many people might be confused about figuring out where to press to slide the slidebox vs. the side menu. One way to deal with that is to disable the canDragContent for the side menu, which still achieves the needed stability of vertical scrolling (set by the limitslide attribute.)

.directive('mainslidebox', function ($ionicGesture, $ionicSideMenuDelegate, $ionicSlideBoxDelegate) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var limit = attrs.limitslide;
            $ionicGesture.on(
                "dragleft",
                function (ev) {
                    if (ev.gesture.deltaX.toFixed(0) < (limit * -1)) {
                        //console.log('Right to Left');
                        $ionicSlideBoxDelegate.enableSlide(true);
                    }
                },
                element
            );
            $ionicGesture.on(
                "dragright",
                function (ev) {
                    if (ev.gesture.startEvent.center.pageX > 50) {

                        $ionicSideMenuDelegate.canDragContent(false);

                        if (ev.gesture.deltaX.toFixed(0) > (limit * 1)) {
                            //console.log('Left to Right');
                            $ionicSlideBoxDelegate.enableSlide(true);
                        }
                    } else {
                        $ionicSideMenuDelegate.canDragContent(true);
                    }
                },
                element
            );

            $ionicGesture.on(
                "release",
                function (ev) {
                    //console.log('Release');
                    $ionicSlideBoxDelegate.enableSlide(false);
                },
                element
            );
        }
    };
})
1 Like
5

Thanks again for posting this–it saved me from removing the slidebox entirely. Still tweaking the limitslide attribute based on user feedback, but it is much more stable now.

6

I’m glad to help all community. :smile: