ng2-ui / scrollable

Angular2 Automatic Scroll Detection With Animation

scrollable

Angular2 Automatic Scroll Detection With Animation

IMPORTANT: NOT-MAINTAINED

Accepting volunteers and ready to transfer ownership.

Plunker Example: https://plnkr.co/edit/wLVudY?p=preview&open=app.component.ts

Install

1. install @ngui/scrollable

    $ npm install @ngui/scrollable --save-dev
   

2. add map and packages to your systemjs.config.js

    map['@ngui/scrollable'] = 'node_modules/@ngui/scrollable/dist/scrollable.umd.js';
   

3. import NguiScrollableModule to your AppModule

    import { NguiScrollableModule } from '@ngui/scrollable';
    
    @NgModule({
      imports: [BrowserModule, FormsModule, NguiScrollableModule],
      declarations: [AppComponent],
      bootstrap: [ AppComponent ]
    })
    export class AppModule { }
   

Usage it in your code

    <ul>
      <li [class.current]="id=='s1'" (click)="scrollable.el.scrollTo('s1')">One
      <li [class.current]="id=='s2'" (click)="scrollable.el.scrollTo('s2')">Two
      <li [class.current]="id=='s3'" (click)="scrollable.el.scrollTo('s3')">Three
      <li [class.current]="id=='s4'" (click)="scrollable.el.scrollTo('s4')">Four
      <li [class.current]="id=='s5'" (click)="scrollable.el.scrollTo('s5')">Five
      <li [class.current]="id=='s6'" (click)="scrollable.el.scrollTo('s6')">Six
      <li [class.current]="id=='s7'" (click)="scrollable.el.scrollTo('s7')">Seven
      <li [class.current]="id=='s8'" (click)="scrollable.el.scrollTo('s8')">Eight
      <li [class.current]="id=='s9'" (click)="scrollable.el.scrollTo('s9')">Nine
    </ul>
    <div class="scrollable" (scrolledTo)="id=$event" ngui-scrollable>
      <div id="s1">One</div>
      <div id="s2">Two</div>
      <div id="s3">Three</div>
      <div id="s4">Four</div>
      <div id="s5">Five</div>
      <div id="s6">Six</div>
      <div id="s7">Seven</div>
      <div id="s8">Eight</div>
      <div id="s9">Nine</div>
    </div>

For full example, please check out test directory to see the example of;

• systemjs.config.js
• app.module.ts
• and app.component.ts.

ng2-ui welcomes new members and contributors

This module is only improved and maintained by contributors like you.

As a contributor, it's NOT required to be skilled in Javascript nor Angular2. You are only to be open-minded and interested in helping others. As a contributor, you do following;

• Updating README.md
• Improving code comments
• Answering issues and building FAQ
• Documentation
• Translation

In result of your active contribution, you will be listed as a core contributor on https://ng2-ui.github.io, and a member of ng2-ui too.

If you are interested in becoming a contributor and/or a member of ng-ui, please send me email to allenhwkim AT gmail.com with your github id.

LICENSE

MIT

scrollable's Issues

Horizontal Scroll is broken

Horizontal scroll is broken for Chrome Version 61.0.3163.100 (Official Build) (64-bit)

Not working in mobile devices in only chrome browser.

Please can you help me in this ASAP. Client needed urgently.

Samsung, Moto devices
Google chrome latest browser
CLI : 1.3.2
Typescript : 2.5.2
ng2-scrollable : 0.8.0

Thank you.

when i click a tab in vertical condition, i suppose the id is s4, then the active is s3 id,how to solve this problem?

How can I scroll without animation?

Universal support for this library

i'm trying to use this lib in a universal project . can you work around with the use of window object?

ReferenceError: window is not defined

Clear dependencies array

It's possible to clear dependencies array (like it is https://github.com/ng2-ui/ng2-auto-complete) and move all to devDependencies? To prevent download node_modules in production version.

If I am scrolling up only 1px than my active class change 2 to 1. If I am scrolling up to 20% after I want to change my active class.

Not working in mozila firefox + angular 4 + cli 1.0.4 [ubutnu 16]

can I set the duration for this?

I can not find the setting for this. will it be a new setting in the next version?

Cannot read property 'el' of undefined

ERROR in Ng2ScrollableModule is not an NgModule

When building my app or serve it i get this error.

after ng serve i can solve the problem by forcing another error. then fix it back.
(deleting dependency and return it back)
and the ng serve compilation success.

using:
angular cli - version 32.3
tsc - version 2.2.1

Type NguiScrollableModule does not have 'ɵmod' property.

After upgrade from angular 5 to angular 11 NguiScrollableModule is not working.


The issue is causing because it's returning empty in scrollable.module.js file
var NguiScrollableModule = (function () {
function NguiScrollableModule() {
}
return NguiScrollableModule;
}());

Scroll doesn't work with ngFor

I following demo and simple edit code like this
<ul>
<li *ngFor="let num of [1,2,3,4,5,6,7,8,9,10]" [class.current]="id == 's'+ num " (click)="scrollTo('#s'+num, '#v-scrollable')">{{num}}
</ul>

scrolled to: {{id}}
<div id="v-scrollable" class="scrollable section" ng2-scrollable (elementVisible)="id = $event.id">
<div *ngFor="let num of [1,2,3,4,5,6,7,8,9,10]" [id]="'s'+ num ">
Section {{num}} (scroll to here)
</div>
</div>
but demo don't work. How can i fix that?

Horizontal scroll doesn't work on Firefox

Hi, my horizontal scroll works fine on Chrome and Safari browser but it doesn't work on Firefox - it shows automatically the horizontal scrollbar on Firefox but which is hidden on Chrome.

The code is copied from Plunker:
https://plnkr.co/edit/wLVudY?p=preview&open=app.component.ts

html file:

<button (click)="scrollTo('#h14', '#h-test', true)">scroll 14</button>
<button (click)="scrollTo('#h1', '#h-test', true)">scroll 1</button>

<ul id="h-test" class="test nav" style="width: 500px"
    [horizontal]="true"
    ngui-scrollable (elementVisible)="id = $event.id" dnd-sortable-container [sortableData]="items" (dragend)="onDraggend()">
    <li id="h1" style="width: 100px; margin: 20px; background-color:lightblue;">
        aa
    </li>
    <li id="h2" style="width: 100px; margin: 20px; background-color:lightblue;">
        bb
    </li>
    <li id="h3" style="width: 100px; margin: 20px; background-color:lightblue;">
        cc
    </li>
    <li id="h4" style="width: 100px; margin: 20px; background-color:lightblue;">
        dd
    </li>
    <li id="h5" style="width: 100px; margin: 20px; background-color:lightblue;">
        ee
    </li>
    <li id="h6" style="width: 100px; margin: 20px; background-color:lightblue;">
        ff
    </li>
    <li id="h7" style="width: 100px; margin: 20px; background-color:lightblue;">
        gg
    </li>
    <li id="h8" style="width: 100px; margin: 20px; background-color:lightblue;">
        hh
    </li>
    <li id="h9" style="width: 100px; margin: 20px; background-color:lightblue;">
        ii
    </li>
    <li id="h10" style="width: 100px; margin: 20px; background-color:lightblue;">
        jj
    </li>
    <li id="h11" style="width: 100px; margin: 20px; background-color:lightblue;">
        aa
    </li>
    <li id="h12" style="width: 100px; margin: 20px; background-color:lightblue;">
        bb
    </li>
    <li id="h13" style="width: 100px; margin: 20px; background-color:lightblue;">
        cc
    </li>
    <li id="h14" style="width: 100px; margin: 20px; background-color:lightblue;">
        dd
    </li>
    <li id="h15" style="width: 100px; margin: 20px; background-color:lightblue;">
        ee
    </li>
    <li id="h16" style="width: 100px; margin: 20px; background-color:lightblue;">
        ff
    </li>
    <li id="h17" style="width: 100px; margin: 20px; background-color:lightblue;">
        gg
    </li>
    <li id="h18" style="width: 100px; margin: 20px; background-color:lightblue;">
        hh
    </li>
    <li id="h19" style="width: 100px; margin: 20px; background-color:lightblue;">
        ii
    </li>
    <li id="h20" style="width: 100px; margin: 20px; background-color:lightblue;">
        jj
    </li>
</ul>

css file:

.test {
    /* Styles go here */
    * { box-sizing: border-box};
    legend {background-color: #fff};
    ul {list-style: none}
    ul li {display: inline-block; border: 1px solid #999; padding: 10px; cursor: pointer;}
    ul li.current { background: #333; color: #fff}
    .scrollable { height: 200px; border: 1px solid #999; position: relative;}
    .scrollable > div {height: 110px}
    .scrollable > div:nth-child(odd) { background-color: #ccc}

    ul.window {position: fixed; top: 0; left: 0; background: yellow; z-index: 1;}
    ul.window li {display: block; }
    .scrollable.section {overflow:auto;}

    .horizontal {
        height: 100px;
        width: 100%;
        max-width: 450px;
        white-space: nowrap;
        overflow-y: hidden !important;
    }
    .horizontal > div {
        border: 1px solid #666;
        width: 200px;
        height: 80px;
        display: inline-block;
        text-align: center;
    }

    fieldset {background: #f0f0f0;}
    legend {background: #fff; padding: 0 10px;}
}

ts component file:

scrollTo(selector: string, parentSelector: string, horizontal: boolean) {
        NguiScrollableDirective.scrollTo(
            selector,       // scroll to this
            parentSelector, // scroll within (null if window scrolling)
            horizontal     // is it horizontal scrolling
        );
    }

Tks a lot!

Doesn't Working in Mozila Firefox

I have used Angular4 Angular-cli 1.2.1.
I have made one page website but 3 pages are single so I have added 3 pages.

One page tab like Home About us Product Gallery
Another page is FAQ's and Contact us
In Footer link of Terms of use

When I at home page then I show Home About us Product Gallery FAQ's and Contact us
When I at FAQ's or Contact us page then I show Home FAQ's and Contact us

But I want to show all page in header when I at FAQ's or Contact us.
I have set and get item using session.

One page header is difference and FAQ's or Contact us header is difference.

HTML & Typescript Code

=================== Set Item in Session ============

<a (click)="onTab('Faqs')" scrollTo>FAQ's</a>

onTab(tabName){
    sessionStorage.setItem(tabName, "true");
    this.router.navigate(['/']);
  }

=================== Get and Set Item in Session ============

import {scrollTo} from 'ng2-utils';

 ngAfterViewInit(){
    if (sessionStorage.getItem('Faqs') == 'true') {
      sessionStorage.setItem('Faqs', 'false');
      setTimeout(function () {
        scrollTo('#Faqs');
      }, 70);
    }
}

Working in Google Chrome, Edge browsers but still not working on Mozilla Firefox.
So please assistance me.