Draggable scroll: How to get current scroll position?

[luneyard 0 Likes (Newbie)]

Hello,

 

I am trying to build a UI where two arrows – up and down – control the scroll position.

The scroll element is a Draggable.

var scroller = $('.scroller.draggable');

Draggable.create(scroller, {
        type:"scrollTop",
        edgeResistance:0.75,
        throwProps:true,
        onDragStart: function() {
            Draggable.get(menu).disable();
        },
        onDragEnd: function() {
            Draggable.get(menu).enable();
        }
    });

$('.icon-arrow-down').on('click', function(event){
        TweenLite.to(scroller, 1, {scrollTo:{y:$scope.yStart}, ease:Power2.easeOut, onComplete:updateYScroll});
        function updateYScroll() {
            console.log(this.scrollY);
            //$scope.yStart = scroller.scrollY + $scope.yIncrement;
        }
    });

But when calling scrollY I always get undefined...

 

Greetings,

luneyard

[Jonathan 5,176 Likes (Superhero)]

Hello luneyard, and welcome to the GreenSock Forum!

 

I believe scrollY is only available on the window object.

 

Please see: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY

 

I believe you are looking for using scrollTop instead:

 

Please see: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop

// Get the number of pixels scrolled
var  myScrollTop = this.scrollTop;

:

[GreenSock 8,117 Likes (Superhero)]

Also note that you can check the Draggable's "y" property which is basically scrollTop in the opposite direction (so make it negative)

yourDraggable.y;

You can also use the methods on the scrollProxy of the Draggable as well:

yourDraggable.scrollProxy.scrollTop(); //returns the scroll position