Question

我这里有一个傻瓜 - https://plnkr.co/edit/N6UuQJbOfdtmQygpr6cL?p=preview

我在Angular应用程序中有一个简单的表格，表格从左向右滚动

我正在使用jQuery捕获页面滚动时 - 我正在输出一个简单的控制台日志。

我正在为表格中的一个简单的粘性标题执行此操作。

我还需要捕捉表格从左向右滚动的时间。

这不起作用，我没有得到控制台日志。

有没有办法用jQuery

捕获表中的左/右滚动

import {Component, OnInit} from '@angular/core';
declare let $: any;

@Component({
  selector: 'my-app',
  templateUrl: './src/app.html'
})

export class AppComponent implements OnInit{


  constructor() {

  }

  ngOnInit(){
    this.scrollWindow();
    this.scrollTable();
  }

  scrollWindow(){
    $(function(){

        $(window).on('scroll', function(){
          console.log('window scroll')
        })

    })
  }  

  scrollTable(){
    $(function(){

        $(table).on('scroll mousewheel', function(){
          console.log('table scroll')
        })

    })
  }  
}

Answer 1

您可以在没有jquery的情况下执行此操作，使用CREATE TABLE IF NOT EXISTS `currency_rates` ( `id` INT NOT NULL AUTO_INCREMENT , `currency` VARCHAR(254) NOT NULL , `rate` FLOAT NOT NULL , `temptime` DATE NOT NULL , PRIMARY KEY (`id`) ) ENGINE = MyISAM; INSERT INTO `currency_rates` (currency, rate, temptime) VALUES ('USD', '1.232', '2018-03-16'), ('AUD', '133.82', '2018-03-16'), ('CAD', '1.99', '2018-03-16'), ('EUR', '1.6654', '2018-03-16'), ('USD', '1.242', '2018-03-17'), ('AUD', '132.82', '2018-03-17'), ('CAD', '1.79', '2018-03-17'), ('EUR', '1.4654', '2018-03-17'), ('USD', '1.272', '2018-03-19'), ('AUD', '123.82', '2018-03-19'), ('CAD', '1.765', '2018-03-19'), ('EUR', '1.254', '2018-03-19'); $result1 = mysql_query("SELECT currency, rate, temptime FROM `currency_rates` WHERE currency = 'USD' ORDER BY temptime asc"); $result2 = mysql_query("SELECT currency, date, rate FROM `currency_rates` WHERE currency IN ('AUD', 'CAD', 'EUR') ORDER BY temptime asc"); $result3 = I want that every rate from $result2 is divided for the USD rate from $result1 with the same temptime.事件绑定。要绑定到(scroll)滚动事件，请按照以下方式使用它：window。

(window:scroll)="onScroll()"

Answer 2

您可以使用HostListener并导入组件

import {  HostListener} from '@angular/core';

并在你的组件内创建函数onWindowScroller。并在函数调用的顶部HostListener('window:scroll')

@HostListener('window:scroll', [])
  onWindowScroll() {
      if (document.documentElement.scrollTop > 700) {
        console.log('+700');
      } else {
        console.log('-700');
      }    
  }

您可以在函数中使用此代码

Angular with jQuery capture scroll

2 个答案: