JavaScript 对话框被编程为在页面滚动时移动，但它会闪烁。这可以解决吗？

Question

我编写了一些 jQuery 代码来在用户 Web 浏览器的一 Angular 显示一个包含数据的框。我使用 .scroll 事件使该框在用户上下滚动页面时保持在 Angular 落中。让我强调一下我没有使用 jquery-ui 对话框。

唯一的问题是当页面滚动时该框会闪烁。恐怕这个问题不会有跨浏览器的解决方案，因为不同的浏览器在滚动方面似乎表现不同。除非使用跨浏览器解决方案，否则 IE 解决方案会很好(我的 Web 应用程序设计供我的组织中大约 100 个用户组成的特定组使用。)

以下是相关代码片段:

ExternalScroll: function () {
            LittleBlackBook.setPosition();
        }

    setPosition: function () {
        var scrollPosition = $(self).scrollTop();
        var cssTop = LittleBlackBookStatic.determineCssTop(this.height, this.isTop, this.vOffset, scrollPosition);
        var cssHeight = LittleBlackBookStatic.determineCssHeight(this.height);
        var cssLeft = LittleBlackBookStatic.determineCssLeft(this.width, this.isLeft, this.hOffset);
        var cssWidth = LittleBlackBookStatic.determineCssWidth(this.width);
        this.jQueryObj.css('top', cssTop);
        this.jQueryObj.css('height', cssHeight);
        this.jQueryObj.css('left', cssLeft);
        this.jQueryObj.css('width', cssWidth);
    }

var LittleBlackBookStatic = {
    determineCssTop: function (height, isTop, vOffset, vScroll) {
        var windowHeight = $(self).height();
        var scrollPosition = $(self).scrollTop();
        var newModalTop = isTop ? vOffset + vScroll : windowHeight - height + vScroll - vOffset;
        return newModalTop + 'px';
    },

    determineCssHeight: function (height) {
        return height + 'px';
    },

    determineCssLeft: function (width, isLeft, hOffset) {
        var windowWidth = $(self).width();
        var newModalLeft = isLeft ? hOffset : windowWidth - width - hOffset;
        return newModalLeft + 'px';
    },

    determineCssWidth: function (width) {
        return width + 'px';
    }
} // end LittleBlackBookStatic

我使用 jQuery 在页面滚动时查找滚动位置并更改 CSS。

有没有更好的办法；一种让它滚动而不闪烁的方法？如果不是，那为什么不呢？

Answer 1

您应该对该框使用固定定位，而不是通过动画让它保持在 Angular 落里。

您将使用更少的 JavaScript 并避免动画带来的闪烁。