You signed in with another tab or window.Reload to refresh your session.You signed out in another tab or window.Reload to refresh your session.You switched accounts on another tab or window.Reload to refresh your session.Dismiss alert
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+.
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.
<divstz-scroll-into-viewstz-s-i-v-img><imgsrc="placehold.it/800x600/8A8BA6/CACBF2/"stz-s-i-v-ele="false"stz-image-loadalt="I think I deserve to be scrolled to!"/><imgsrc="placehold.it/800x620/8A8BA6/CACBF2/"stz-s-i-v-ele="true"stz-image-loadalt="I think I deserve to be scrolled to!"/><imgsrc="placehold.it/800x640/8A8BA6/CACBF2/"stz-s-i-v-ele="false"stz-image-loadalt="I think I deserve to be scrolled to!"/><imgsrc="placehold.it/800x660/8A8BA6/CACBF2/"stz-s-i-v-ele="no"stz-image-loadalt="I think I deserve to be scrolled to!"/><imgsrc="placehold.it/800x680/8A8BA6/CACBF2/"stz-s-i-v-elestz-image-loadalt="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.
<sectionid="content"><h1>The most amazing title ever!!!</h1><ulstz-scroll-into-viewstz-s-i-v-parent-id="content"><listz-s-i-v-ele="0">Maybe visible, too.</li><listz-s-i-v-ele="false">Maybe noticable, too.</li><listz-s-i-v-ele="no-scroll-for-me">Maybe valuable, too.</li><listz-s-i-v-ele="true">Maybe managable, too.</li><listz-s-i-v-ele="scroll-to-the-guy-above-me">Maybe available, too.</li></ul></section>
Dynamic List Example:
wherescroll.isActive is expected to betrue.
<ulstz-scroll-into-viewstz-s-i-v-ng-repeat><ling-repeat="scroll in scrollSuperCollection"stz-s-i-v-ele="{{scroll.isActive}}"stz-last-repeat>{{scroll.title}}</li></ul>
Dynamic List Example With Watcher:
wherescrollAwesomeIndex 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.
<ulstz-scroll-into-view="scrollAwesomeIndex"stz-s-i-v-ng-repeat><ling-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:
wherescroll.isActive is expected to betrue.
<ulstz-scroll-into-viewstz-s-i-v-ng-repeatstz-s-i-v-img><ling-repeat="scroll in scrollAwesomeList track by $index"stz-s-i-v-ele="{{scroll.isActive}}"stz-last-repeat><imgng-src="placehold.it/8{{$index % 5}}0x6{{$index % 10}}0/8A8BA6/CACBF2/"stz-image-loadalt="I think I deserve to be scrolled to!"/></li></ul>
Dynamic List Example With Images and Watcher:
wherescrollAwesomeIndex 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.
<ulstz-scroll-into-view="scrollAwesomeIndex"stz-s-i-v-ng-repeatstz-s-i-v-img><ling-repeat="scroll in scrollAwesomeList track by $index"stz-s-i-v-ele="{{$index}}"stz-last-repeat><imgng-src="placehold.it/8{{$index % 5}}0x6{{$index % 10}}0/8A8BA6/CACBF2/"stz-image-loadalt="I think I deserve to be scrolled to!"/></li></ul>
About
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+.
