Событие прокрутки Hostlistener не запускается - PullRequest
Новая
       10

Событие прокрутки Hostlistener не запускается

0 голосов
/ 08 мая 2018

Моя основная цель - когда пользователь прокручивает страницу вниз, мне нужно получить текущее смещение scrollTop. И пользователь может прокручивать щелчком мыши по полосе прокрутки или колесом мыши, поэтому, когда пользователь делает это, я хочу обновить параметры take() и skip() (или page()) на ejQuery () , чтобы запустить http получить и предоставить данные для этого представления.

Использование SyncFusion 1

Нижеследующий код был моей попыткой присвоить директиву ejTreeGrid , которая наблюдает за событием scroll через HostListener () , но, как упомянул пользователь PierreDuc, ejTreeGrid реализует свой собственный скроллер, поэтому по умолчанию он не срабатывает. PierreDuc рекомендовал использовать метод getScrollTopOffset, но мне все равно нужно его запускать каждый раз, когда пользователь выполняет действие прокрутки ...

К компоненту SyncFusion ejTreeGrid прилагается директива для просмотра события scroll, но она не срабатывает. Все нормально с событием click - запускается на этом дочернем компоненте. Что может быть не так?

Пробовал: 

@HostListener('scrollY', ['$event'])
onScroll(e) {
    console.log(e)
}
@HostListener('onscroll', ['$event'])
onScroll2(e) {
    console.log(e)
}
@HostListener('scroll', ['$event'])
onScroll3(e) {
    console.log(e)
}

@HostListener('scrollX', ['$event'])
onScroll4(e) {
    console.log(e)
}

Это работает: 

@HostListener('click', ['$event'])
onClick(e) {
    console.log('clicked')
    console.log(e)

}

Обновление:

Также добавлено: 

@HostListener('mousewheel', ['$event'])
onScroll5(e) {
    console.log('mousewheel')
}

@HostListener('DOMMouseScroll', ['$event'])
onScroll6(e) {
    console.log('DOMMouseScroll')
}

@HostListener('onmousewheel', ['$event'])
onScroll7(e) {
    console.log('onmousewheel')
}

и по какой-то причине срабатывает только mousewheel и только тогда, когда я прокручиваю колесо мыши (очевидно), но только тогда, когда полоса прокрутки находится сверху или снизу. В противном случае он не срабатывает.

Ответы [ 4 ]

0 голосов
/ 12 мая 2019 
@HostListener('document:scroll', ['$event'])
onScroll(event) {
 console.log(event.target)
}

OR 

@Component({
  selector: 'scroll',
  templateUrl: './scroll.component.html',
  styleUrls: ['./scroll.component.scss'],
  host:{
    '(document:scroll)':'onScroll($event)'
  }
})
0 голосов
/ 08 мая 2018

Ниже рабочий код: 

@HostListener('document:mousewheel', ['$event'])
onDocumentMousewheelEvent(event) {
    console.log('on Mouse wheel Event');
}

Пожалуйста, проверьте демо здесь

0 голосов
/ 22 июня 2018

В TreeGrid с включенным режимом виртуализации actionComplete будет запускаться с аргументом requestType как scroll при действии прокрутки. В этом случае мы можем получить текущую верхнюю позицию прокрутки из экземпляров полосы прокрутки. Чтобы включить режим виртуализации, мы должны установить для свойства enableVirtualization значение true. Пожалуйста, обратитесь к следующему фрагменту кода. 

<code><pre>
//app.component.html 
ej-treegrid #TreeGridControl id="TreeGridContainer" 
//… 
enableVirtualization = "true" (actionComplete) = "actionComplete($event)" > 
/ej-treegrid> 

//app.component.ts 
actionComplete(args){           
          if(args.requestType == "scroll"){ 
            var treeObj = this.treeGrid.widget; 
            var scrollTop = treeObj.getScrollElement().ejScroller("scrollTop"); 
            this.scrollValue = scrollTop; 
          }
        }

Мы также подготовили образец для ознакомления. Пожалуйста, уточните образец по ссылке ниже, Образец
Пожалуйста, дайте нам знать, если вам требуется какая-либо другая помощь по этому вопросу.

Привет

Поддержка Syncfusion

0 голосов
/ 08 мая 2018

ejTreeGrid использует пользовательскую реализацию полосы прокрутки. Это означает, что нет никакого собственного события прокрутки, запускаемого из этого элемента. Возможно, вы можете делать то, что хотите, с помощью метода getScrollTopOffset в экземпляре ejTreeGrid.

В противном случае вы можете запросить syncfusion для функции, которая генерирует пользовательское событие при прокрутке

FYI

Для захвата события колесика мыши вы должны использовать событие wheel

...