https://github.com/slantz/angular-scroll-into-view

This directive allows to scroll to a custom Node list array element inside a parent container. Can be used along with on-image-load directive if all the child elements are images or contain images to scroll to a particular element only when all images are loaded. IE9+.
https://github.com/slantz/angular-scroll-into-view

angular scrolling view

Last synced: about 1 month ago
JSON representation

This directive allows to scroll to a custom Node list array element inside a parent container. Can be used along with on-image-load directive if all the child elements are images or contain images to scroll to a particular element only when all images are loaded. IE9+.

• Host: GitHub
• URL: https://github.com/slantz/angular-scroll-into-view
• Owner: slantz
• License: gpl-2.0
• Created: 2015-08-23T09:03:02.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2016-12-25T13:39:53.000Z (over 9 years ago)
• Last Synced: 2026-01-17T08:42:13.330Z (3 months ago)
• Topics: angular, scrolling, view
• Language: CoffeeScript
• Homepage:
• Size: 23.4 KB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# stz-scroll-into-view

[![stz-scroll-into-view on NPM](https://img.shields.io/npm/v/stz-scroll-into-view.svg)](https://www.npmjs.com/package/stz-scroll-into-view)

[![stz-scroll-into-view on Bower](https://img.shields.io/bower/v/stz-scroll-into-view.svg)](http://bower.io/search/?q=stz-scroll-into-view)

> This directive allows to scroll to a custom Node list array element inside a parent container.

> Can be used along with stz-image-load directive if all of the child elements are images or contain images to scroll to a particular element only when all images are loaded or with stz-last-repeat directive to consider the ng-repeat presence and scroll after ng-repeat is rendered. Or can make use of both ng-repeat and images combined.

> IE9+.

[Demo](http://slantz.github.io/angular-scroll-into-view/)

### Static List Example:

> By default the list view will be scrolled to the element that has ```[stz-s-i-v-ele="true"]```attribute.

```html



  
Hidden

  
Hidden

  
Hidden

  
Visible

  
Maybe visible, too.



```


### Static List Example With Watcher:

> where ```isTimeToScrollScopeVar``` will be resolved to ```'scroll-to-me'```.

```html



  
Hidden

  
Hidden

  
Hidden

  
Hidden

  
Hidden



```


### Static List Example With Images:

```html



  

  

  

  

  



```


### Static List Example With Extra Parent that should be scrolled to top:

> ```stz-scroll-into-view``` element is used by default.

```html

  
The most amazing title ever!!!

  


    
Maybe visible, too.

    
Maybe noticable, too.

    
Maybe valuable, too.

    
Maybe managable, too.

    
Maybe available, too.

  


```

### Dynamic List Example:

> where ```scroll.isActive``` is expected to be ```true```.

```html



  
{{scroll.title}}



```


### Dynamic List Example With Watcher:

> where ```scrollAwesomeIndex``` can be watched to be defined or any other scope param can be passed.

Let it be resolved to say 7 here and scrollAwesomeList will have 10 elements.

```html



  
{{scroll.title}}



```


### Dynamic List Example With Images:

> where ```scroll.isActive``` is expected to be ```true```.

```html



  


    

  



```


### Dynamic List Example With Images and Watcher:

> where ```scrollAwesomeIndex``` can be watched to be defined or any other scope param can be passed.

Let it be resolved to say 7 here and scrollAwesomeList will have 10 elements.

The scroll will happen only when ng-repeat is rendered, all images are loaded and ```scrollAwesomeIndex``` is resolved.

```html



  


    

  



```