angularjs-如何在不使用jQuery的情况下获取元素的offset()。top值?

我正在使用Angular框架编写单页应用程序。 我是新来的。 我已经阅读了本指南,以帮助我了解jQuery和Angular之间的根本区别,并且我想尽可能地遵循本指南,而不使用jQuery。

jQuery可以帮助解决一些浏览器不兼容问题,并提供有用的函数库,例如能够像$('element').offset().top这样从窗口顶部知道元素的顶部位置。似乎没有普通的Javascript能够出现 关闭而不重写此函数,那时候使用jQuery或类似jQuery的库不是更好的主意吗?

具体来说,我要尝试建立的指令是一旦元素的顶部滚动到窗口中的某个位置,就将该元素固定在适当的位置。 看起来是这样的:

directives.scrollfix = function () {
    return {
        restrict: 'C',
        link: function (scope, element, $window) {

            var $page = angular.element(window)
            var $el   = element[0]
            var elScrollTopOriginal = $($el).offset().top - 40

            $page.bind('scroll', function () {

                var windowScrollTop = $page[0].pageYOffset
                var elScrollTop     = $($el).offset().top

                if ( windowScrollTop > elScrollTop - 40) {
                    elScrollTopOriginal = elScrollTop - 40
                    element.css('position', 'fixed').css('top', '40px').css('margin-left', '3px');
                }
                else if ( windowScrollTop < elScrollTopOriginal) {
                    element.css('position', 'relative').css('top', '0').css('margin-left', '0');
                }
            })

        }
    }
}

如果在Angular中有更好的方法来实现这一点,而我仍然没有得到,我将不胜感激。

saikofish asked 2020-07-31T06:09:09Z
6个解决方案
60 votes

如果$el是实际的DOM对象,请使用$el

var top = $el.getBoundingClientRect().top;

JSFiddle

小提琴将显示这将获得与jquery的offset top相同的值

编辑:如注释中所述,这不考虑滚动内容,下面是jQuery使用的代码

[HTTPS://GitHub.com/jQuery/jQuery/blob/master/双人床/offset.就是] (5/13/2015)

offset: function( options ) {
    //...

    var docElem, win, rect, doc,
        elem = this[ 0 ];

    if ( !elem ) {
        return;
    }

    rect = elem.getBoundingClientRect();

    // Make sure element is not hidden (display: none) or disconnected
    if ( rect.width || rect.height || elem.getClientRects().length ) {
        doc = elem.ownerDocument;
        win = getWindow( doc );
        docElem = doc.documentElement;

        return {
            top: rect.top + win.pageYOffset - docElem.clientTop,
            left: rect.left + win.pageXOffset - docElem.clientLeft
        };
    }
}
Patrick Evans answered 2020-07-31T06:09:52Z
45 votes

这是一个无需jQuery即可完成的功能:

function getElementOffset(element)
{
    var de = document.documentElement;
    var box = element.getBoundingClientRect();
    var top = box.top + window.pageYOffset - de.clientTop;
    var left = box.left + window.pageXOffset - de.clientLeft;
    return { top: top, left: left };
}
Paul Go answered 2020-07-31T06:10:12Z
10 votes

似乎您可以仅在角度元素上使用prop方法:

var top = $el.prop('offsetTop');

为我工作。 有人知道这有什么缺点吗?

Darren answered 2020-07-31T06:10:37Z
3 votes

Patrick Evans接受的解决方案不考虑滚动。我稍微改变了他的jsfiddle来证明这一点:

CSS:添加一些随机高度以确保我们有一定的滚动空间

body{height:3000px;} 

js:设置一些滚动位置

jQuery(window).scrollTop(100);

结果,这两个报告的值现在不同:[http://jsfiddle.net/sNLMe/66/]

更新2015年2月14日

有一个等待jqLite的请求,包括其自身的offset方法(注意当前滚动位置)。 如果您想自己实现它,请看一下源代码:[https://github.com/angular/angular.js/pull/3799/files]

schellmax answered 2020-07-31T06:11:19Z
0 votes

您可以尝试element [0] .scrollTop,我认为这种解决方案速度更快。

这里有一个更大的示例-[http://cvmlrobotics.blogspot.de/2013/03/angularjs-get-element-offset-position.html]

bmazurek answered 2020-07-31T06:11:43Z
0 votes

为了使Angular 2+获得当前元素的偏移量(this.el.nativeElement等于jquery中的$(this)):

export class MyComponent implements  OnInit {

constructor(private el: ElementRef) {}

    ngOnInit() {
      //This is the important line you can use in your function in the code
      //-------------------------------------------------------------------------- 
        let offset = this.el.nativeElement.getBoundingClientRect().top;
      //--------------------------------------------------------------------------    

        console.log(offset);
    }

}
Combine answered 2020-07-31T06:12:03Z
translate from https://stackoverflow.com:/questions/18953144/how-do-i-get-the-offset-top-value-of-an-element-without-using-jquery