https://github.com/bem-contrib/bem-scrollspy
Scrollspy for i-bem framework
https://github.com/bem-contrib/bem-scrollspy
Last synced: 6 months ago
JSON representation
Scrollspy for i-bem framework
- Host: GitHub
- URL: https://github.com/bem-contrib/bem-scrollspy
- Owner: bem-contrib
- Created: 2015-04-02T19:14:15.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2020-08-07T07:02:21.000Z (almost 5 years ago)
- Last Synced: 2024-11-11T05:12:10.307Z (6 months ago)
- Language: JavaScript
- Size: 23.4 KB
- Stars: 8
- Watchers: 8
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
BEM-Scrollspy
=============
Блок для отслеживания прокрутки страницы. Предназначен для проектов, использующих БЭМ методологию.
## Зависимости
bem-core
* блок `i-bem-dom`
* блок `next-tick`
* блок `functions`
* блок `jquery`
## Установка
1. Добавьте библиотеку в зависимости `package.json`:
```json
{
"devDependencies": {
"bem-scrollspy": "github:bem-contrib/bem-scrollspy#v0.3.0"
}
}
```
2. Добавьте уровень переопределения в файл `.bemrc.js`:
``` javascript
{
root: true,
levels: [],
libs: {
"bem-scrollspy": {}
}
}
```
## Использование
Все, что делает блок `scrollspy` — генерирует два БЭМ-события:
* `scrollin` - когда блок становится виден пользователю;
* `scrollout` - когда блок скрывается из виду.
Подписавшись на эти события, можно выполнять различные действия. Например, запускать и останавливать анимацию:
````javascript
this
._events(this.findMixedBlock(Scrollspy))
.on('scrollin', function() { this.setMod('animation', 'progress'); }, this)
.on('scrollout', function() { this.setMod('animation', 'stop'); }, this);
````
В объекте события передается направление прокрутки. Например:
````javascript
this
._events(this.findMixedBlock(Scrollspy))
.on('scrollin', this._onScrollIn, this); //подписка на событие
function _onScrollIn(_, dir) { //получаем направление скролла вторым параметром
if (dir === 'down') {
doAction();
} else if (dir === 'up') {
doAnotherAction();
}
}
````
## Параметры
Можно задать отступ для блока в пикселях или процентах (по умолчанию 10% от края окна). Можно задать отступ сразу в js-параметрах блока:
````bemjson
{
block: 'scrollspy',
js: { offset: 40 }
}
````
или использовать метод `setOffset()`:
````javascript
const ss = this.findChild(Scrollspy);
ss.setOffset(0);
````
Этот метод установит новый размер отступа и пересчитает позицию блока.
Если вам нужно только пересчитать позицию блока, не меняя значений, можно использовать метод `calcOffsets()`.
## Методы блока
| Метод | Описание |
|-----------------|-----------------------------------------------------|
| setOffset(val) | Устанавливает отступ в процентах или пикселях. |
| calcOffsets() | Запускает расчет позиции блока. |
| activate() | Ручная активация блока (вызовет событие `scrollin`).|
| deactivate() | «Ручной» `scrollout`. |
| getDir() | Возвращает последнее направление прокрутки. |
| isActive() | Проверяет, находится ли блок в зоне просмотра |