neko2me / simple-scroll-spy

Angular 2+ Simple Scroll Spy Directive

This is craeted by ng-packagr on Angular6.

Installation

npm install angular-simple-scroll-spy --save

Usage

In Module:

App Module

import {SimpleScrollSpyModule} from "angular-simple-scroll-spy";

@NgModule({
	imports: [SimpleScrollSpyModule]
})

or

Shared Module

import {SimpleScrollSpyModule} from "angular-simple-scroll-spy";

@NgModule({
	imports: [SimpleScrollSpyModule],
	exports: [SimpleScrollSpyModule]

})

In Component:

Menu Template

<ul>
  <li scrollSpyMenu="menu1" [currentContent]="currentMenuId">Menu 1</li>
  <li scrollSpyMenu="menu2" [currentContent]="currentMenuId">Menu 2</li>
  <li scrollSpyMenu="menu3" [currentContent]="currentMenuId">Menu 3</li>
</ul>

Content Template

<div scrollSpyContent="DIV" [(currentContent)]="currentMenuId">
  <div id="menu1">content1</div>
  <div id="menu2">content2</div>
  <div id="menu3">content3</div>
</div>

Component Class

currentMenuId = "menu1";

Properties:

scrollSpyMenu
scrollSpyMenu	Target content element id.
ssmActiveClassName	Class attribute value when active. default:'active'
ssmCurrentContent	Send current selected element id.
ssmScrollBehavior	Element.scrollIntoView options. default:'smooth'
ssmScrollBlock	Element.ScrollIntoView options. default:'start'
ssmScrollInline	Element.ScrollIntoView options. default:'nearest'

scrollSpyContent
scrollSpyContent	Target element tag name.
sscCurrentContent	Send current selected element id.
sscCurrentContentChange	Output bind of 'sscCurrentContent'.
sscDirection	Scroll direction, 'row'

Demo

npm run start

or

demo on sandbox

simple-scroll-spy's Issues

set a offset ?

Hello, it is possible to set a offset ? currently it change when the targerted div reach almost the top of the parent div , but i would like to trigger the change when the target is at half of the parent .

Not working with angular 6

UserSurveyViewComponent.html:238 ERROR TypeError: Cannot read property 'scrollIntoView' of null
at ScrollSpyMenuDirective.push../node_modules/angular-simple-scroll-spy/fesm5/angular-simple-scroll-spy.js.ScrollSpyMenuDirective.onClick (angular-simple-scroll-spy.js:94)
at Object.eval [as handleEvent] (UserSurveyViewComponent.html:238)
at handleEvent (core.js:10043)
at callWithDebugContext (core.js:11136)
at Object.debugHandleEvent [as handleEvent] (core.js:10839)
at dispatchEvent (core.js:7502)
at core.js:7946
at HTMLLIElement. (platform-browser.js:1137)
at

package.json

`{

"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "node server.js",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.0.0",
"@angular/common": "^6.0.0",
"@angular/compiler": "^6.0.0",
"@angular/core": "^6.0.0",
"@angular/forms": "^6.0.0",
"@angular/http": "^6.0.0",
"@angular/platform-browser": "^6.0.0",
"@angular/platform-browser-dynamic": "^6.0.0",
"@angular/router": "^6.0.0",
"angular-font-awesome": "^3.1.2",
"angular-simple-scroll-spy": "0.0.3",
"bootstrap": "^4.1.2",
"core-js": "^2.5.4",
"cors": "^2.8.4",
"express": "^4.16.3",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"rxjs": "^6.0.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular/compiler-cli": "^6.0.0",
"@angular-devkit/build-angular": "~0.6.1",
"typescript": "~2.7.2",
"@angular/cli": "~6.0.1",
"@angular/language-service": "^6.0.0",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~1.4.2",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1"
}
}
`