Я собираюсь расширить это еще больше для тех бедных душ, которые, как и я, используют одну из современных js фреймворков, а не JQuery и были полностью заброшены людьми из этой ветки:
это было написано на Angular 6, но если вы напишите React 16, Vue 2, Polymer, Ionic, React-Native, вы будете знать, что нужно сделать, чтобы адаптировать его.И это весь компонент, так что это должно быть легко.
import {ElementRef, AfterViewInit} from '@angular/core';
@Component({
selector: 'app',
templateUrl: './app.html',
styleUrls: ['./app.scss']
})
export class App implements AfterViewInit {
scrollAmount;
constructor(
private fb: FormBuilder,
) {}
ngAfterViewInit(){
this.scrollAmount = this.element.nativeElement.querySelector('.elem-list');
this.scrollAmount.addEventListener('wheel', e => { //you can put () instead of e
// but e is usefull if you require the deltaY amount.
if(this.scrollAmount.scrollHeight > this.scrollAmount.offsetHeight){
// there is a scroll bar, do something!
}else{
// there is NO scroll bar, do something!
}
});
}
}
в html будет div с классом "elem-list", который стилизован в css или scss, чтобы иметь height иoverflow значение, которое не hidden.(так что auto или sroll)
Я запускаю это eval при событии прокрутки, потому что моей конечной целью было иметь "автоматические прокрутки фокуса", которые решали бы, прокручивают ли они весь набор компонентов горизонтально, если сказаноКомпоненты не имеют вертикальной прокрутки, в противном случае прокручивают внутренности только одного из компонентов по вертикали.
, но вы можете поместить eval в другом месте, чтобы он мог быть вызван чем-то другим.
важная вещьпомните, что вы никогда не будете вынуждены возвращаться к использованию JQuery, всегда есть способ получить доступ к тем же функциональным возможностям, которые у него есть, без его использования.