stz-scroll-into-view
v1.0.7
Published
Angular scroll to an element inside some view when ng-repeat is rendered or all images are loaded or both cases or scroll to static attribute
Downloads
8
Maintainers
Readme
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+.
Static List Example:
By default the list view will be scrolled to the element that has
[stz-s-i-v-ele="true"]
attribute.
<ul stz-scroll-into-view>
<li stz-s-i-v-ele="false">Hidden</li>
<li stz-s-i-v-ele="not-to-me">Hidden</li>
<li stz-s-i-v-ele="let-me-think...no">Hidden</li>
<li stz-s-i-v-ele="true">Visible</li>
<li stz-s-i-v-ele="scroll-to-the-guy-above-me">Maybe visible, too.</li>
</ul>
Static List Example With Watcher:
where
isTimeToScrollScopeVar
will be resolved to'scroll-to-me'
.
<ul stz-scroll-into-view="isTimeToScrollScopeVar">
<li stz-s-i-v-ele="false">Hidden</li>
<li stz-s-i-v-ele="false">Hidden</li>
<li stz-s-i-v-ele="scroll-to-me">Hidden</li>
<li stz-s-i-v-ele="false">Hidden</li>
<li stz-s-i-v-ele="false">Hidden</li>
</ul>
Static List Example With Images:
<div stz-scroll-into-view stz-s-i-v-img>
<img src="placehold.it/800x600/8A8BA6/CACBF2/" stz-s-i-v-ele="false" stz-image-load alt="I think I deserve to be scrolled to!"/>
<img src="placehold.it/800x620/8A8BA6/CACBF2/" stz-s-i-v-ele="true" stz-image-load alt="I think I deserve to be scrolled to!"/>
<img src="placehold.it/800x640/8A8BA6/CACBF2/" stz-s-i-v-ele="false" stz-image-load alt="I think I deserve to be scrolled to!"/>
<img src="placehold.it/800x660/8A8BA6/CACBF2/" stz-s-i-v-ele="no" stz-image-load alt="I think I deserve to be scrolled to!"/>
<img src="placehold.it/800x680/8A8BA6/CACBF2/" stz-s-i-v-ele stz-image-load alt="I think I deserve to be scrolled to!"/>
</div>
Static List Example With Extra Parent that should be scrolled to top:
stz-scroll-into-view
element is used by default.
<section id="content">
<h1>The most amazing title ever!!!</h1>
<ul stz-scroll-into-view stz-s-i-v-parent-id="content">
<li stz-s-i-v-ele="0">Maybe visible, too.</li>
<li stz-s-i-v-ele="false">Maybe noticable, too.</li>
<li stz-s-i-v-ele="no-scroll-for-me">Maybe valuable, too.</li>
<li stz-s-i-v-ele="true">Maybe managable, too.</li>
<li stz-s-i-v-ele="scroll-to-the-guy-above-me">Maybe available, too.</li>
</ul>
</section>
Dynamic List Example:
where
scroll.isActive
is expected to betrue
.
<ul stz-scroll-into-view stz-s-i-v-ng-repeat>
<li ng-repeat="scroll in scrollSuperCollection" stz-s-i-v-ele="{{scroll.isActive}}" stz-last-repeat>{{scroll.title}}</li>
</ul>
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.
<ul stz-scroll-into-view="scrollAwesomeIndex" stz-s-i-v-ng-repeat>
<li ng-repeat="scroll in scrollAwesomeList track by $index" stz-s-i-v-ele="{{$index}}" stz-last-repeat>{{scroll.title}}</li>
</ul>
Dynamic List Example With Images:
where
scroll.isActive
is expected to betrue
.
<ul stz-scroll-into-view stz-s-i-v-ng-repeat stz-s-i-v-img>
<li ng-repeat="scroll in scrollAwesomeList track by $index" stz-s-i-v-ele="{{scroll.isActive}}" stz-last-repeat>
<img ng-src="placehold.it/8{{$index % 5}}0x6{{$index % 10}}0/8A8BA6/CACBF2/" stz-image-load alt="I think I deserve to be scrolled to!"/>
</li>
</ul>
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 andscrollAwesomeIndex
is resolved.
<ul stz-scroll-into-view="scrollAwesomeIndex" stz-s-i-v-ng-repeat stz-s-i-v-img>
<li ng-repeat="scroll in scrollAwesomeList track by $index" stz-s-i-v-ele="{{$index}}" stz-last-repeat>
<img ng-src="placehold.it/8{{$index % 5}}0x6{{$index % 10}}0/8A8BA6/CACBF2/" stz-image-load alt="I think I deserve to be scrolled to!"/>
</li>
</ul>