我编写了一些 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。
有没有更好的办法;一种让它滚动而不闪烁的方法?如果不是,那为什么不呢?
最佳答案
您应该对该框使用固定
定位,而不是通过动画让它保持在 Angular 落里。
您将使用更少的 JavaScript 并避免动画带来的闪烁。
关于JavaScript 对话框被编程为在页面滚动时移动,但它会闪烁。这可以解决吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6494900/