如何检查角度2上的元素是否在视口中? [英] How to check the element is in viewport on angular 2?

问题描述

如何检查角度2中的元素是否在视口中?我尝试了许多npm软件包.但是没有用.如何检查元素是否在视口中?如果元素在视口中，我想在页面滚动上调用API吗?

How to check element is in viewport in angular 2?. I have tried with many npm packages. But not working. How to check the element is in viewport?. I want to call API on page scroll if element is in viewport?

我有三个标签.我必须检查选项卡是否处于活动状态并且元素是否在视口中.如何检查?

I have three tabs. I have to check if tab is active and element is in viewport. How to check?

推荐答案

如果元素在视口上，则我使用' jQuery-viewport-checker '执行各种任务.它为我工作.这可能对您有帮助:

I used 'jQuery-viewport-checker' to perform various tasks if elements are on viewport. It worked for me. This may help you:

如果在angular 2项目中没有使用"jQuery"，请遵循以下步骤: https://stackoverflow.com/a/42295505/7532440

Follow this if you don't have "jQuery" working in your angular 2 project: https://stackoverflow.com/a/42295505/7532440

您必须使用'Bower'安装'jQuery-viewport-checker'并将其添加到'angular-cli.json'文件中的'Scripts'中，就像您在链接中安装'jQuery'的方式一样我已经提供了.

You'll have to install the 'jQuery-viewport-checker' using 'Bower' and add it to 'Scripts' in 'angular-cli.json' file like the way you have installed the 'jQuery' in the link I have provided.

cmd:

bower install jQuery-viewport-checker

在"angular-cli.json"中:

in 'angular-cli.json':

"scripts": [
      "../bower_components/jquery/dist/jquery.min.js",
      "../bower_components/jQuery-viewport-checker/dist/jquery.viewportchecker.min.js"
  ]

现在您可以使用"jQuery-viewport-checker"

Now you can use 'jQuery-viewport-checker'

更多信息: https://github.com/dirkgroenen/jQuery-viewport-checker

您的app.component.ts将如下所示:

Your app.component.ts will look like this:

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

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'app works!';

 ngOnInit(){

        $(document).ready(function(){
        $("p").click(function(){
        $(this).hide();
    });
    });


        $('.dummy').viewportChecker({
            classToAdd: 'visible', // Class to add to the elements when they are visible,
            classToAddForFullView: 'full-visible', // Class to add when an item is completely visible in the viewport
            classToRemove: 'invisible', // Class to remove before adding 'classToAdd' to the elements
            removeClassAfterAnimation: false, // Remove added classes after animation has finished
            offset: [100], // The offset of the elements (let them appear earlier or later). This can also be percentage based by adding a '%' at the end
            invertBottomOffset: true, // Add the offset as a negative number to the element's bottom
            repeat: false, // Add the possibility to remove the class if the elements are not visible
            callbackFunction: function(elem, action){}, // Callback to do after a class was added to an element. Action will return "add" or "remove", depending if the class was added or removed
            scrollHorizontal: false // Set to true if your website scrolls horizontal instead of vertical.
    });
 }

}

将可见"类添加到ViewPort中后，将在元素中的".dummy"类上添加该类.您应该根据需要进行更多的探索(其他参数) 因此，您可以对HTML进行编码. 希望对您有所帮助.

Here class 'visible' will be added on ".dummy" class in an element once it's in the ViewPort. You should explore it more(other parameters) according to your need Accordingly you can code your HTML. I Hope it helps.

更新:

如果出现错误，请尝试以下操作(因为这些操作适用于问题的作者):

If it gives error try the following (as these worked for the author of the question):

1):尝试将端口ngserve --port 4200更改为4208(或任何其他端口)

1): try changing the port ng serve --port 4200 to 4208 (or any other port)

2):将视口检查器代码放置在文档中，如下所示:

2): put viewport checker code inside document ready like this:

jQuery(document).ready(function(){ 
      $('.dummy').viewportChecker({
            classToAdd: 'visible', // Class to add to the elements when they are visible,
            classToAddForFullView: 'full-visible', // Class to add when an item is completely visible in the viewport
            classToRemove: 'invisible', // Class to remove before adding 'classToAdd' to the elements
            removeClassAfterAnimation: false, // Remove added classes after animation has finished
            //offset: [100], // The offset of the elements (let them appear earlier or later). This can also be percentage based by adding a '%' at the end
            invertBottomOffset: true, // Add the offset as a negative number to the element's bottom
            repeat: false, // Add the possibility to remove the class if the elements are not visible
            callbackFunction: function(elem, action){}, // Callback to do after a class was added to an element. Action will return "add" or "remove", depending if the class was added or removed
            scrollHorizontal: false // Set to true if your website scrolls horizontal instead of vertical.
    });
 });

并删除偏移量:[100]

and remove offset: [100]

这篇关于如何检查角度2上的元素是否在视口中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！