programatically scroll within a child div in angular

Question

I'm writing my own directive which controls a child div (widget to be exact) within a larger screen. The view for the directive contains a scroll bar, separate from the scroll bar on the larger webpage.

When a user clicks a button to calculate results I want to jump down to the results part of the view IFF results come back, but not move the screen if we don't get any results back for his query.

I'm having trouble doing this. $anchorScroll doesn't seem to work, it scrolls the entire screen down instead of just the content of my directive's child div, and in fact doesn't scroll at all if the value I want to scroll to doesn't yet show on the child div.

I've seen plenty of examples of a directive that can be added to an HTML element to handle scrolling but they function on-click without the extra programmatic control I want, deciding when to actually scroll from within a controller method. I don't know how to generalize this logic to work within my larger directive unfortunately.

How would I go about scrolling a child div programmatically without scrolling the larger div?

John Smith · Accepted Answer · 2016-05-18 22:54:07Z

1

You could use element.scrollTop = x. You can see a basic demo here - it will automatically scroll the child div's content after 2 seconds.

The demo uses $timeout, obviously you'll need to put that logic in your $http calls success part.

Assuming you have everything else done, the relevant part is the following:

var target =  angular.element(document.querySelector('#result'));
// #result is your directive's child div
target[0].scrollTop = 200;
// You'll have to calculate the exact number if it's not a fix one.

answered May 18, 2016 at 22:54

John Smith

2,3414 gold badges23 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

programatically scroll within a child div in angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related