Per*_*ttu 5 javascript jquery google-chrome
由于某些原因,在加载页面后尝试使用JavaScript更改填充权限值时,文档正文填充在显示时无法正确更新.看看这个小提琴演示了这个问题.
HTML
<html><body><div></div></body></html>
JavaScript的
// Workaround #1: changing right padding without timeout
//$(document.body).css('padding-right', '100px');
setTimeout(function () {
// This doesn't work properly (at least for me) in Chrome on Ubuntu 12.04
$(document.body).css('padding-right', '100px');
// Write info in body that function was executed
$(document.body).append('timeout function executed');
// Workaround #2: write content into div
//$('div').append('timeout function executed');
// Workaround #3: set document body display to none and back to block via zero ms timeout
/*$(document.body).css('display', 'none');
setTimeout(function () {
$(document.body).css('display', 'block');
}, 0);*/
}, 1000);
有一些解决方法,我如何能够使正确的填充更改有效
我还没有在Windows Chrome上测试过这个,但在Ubuntu 12.04 Chrome版本24上,我能够重现这个问题.在Firefox上,这个问题不会发生.任何其他人都面临同样的问题,有人可以确认是否会在其他操作系统和/或Chrome版本上发生这种情况？
更新
我更新了一个新的小提琴,现在更接近我想要达到的原始想法.当"某事"完成时(在这种情况下,单击div)我希望文档正文填充以更多或更少的平滑动画进行更改.这在Firefox中完美运行,但无法在最新的Chrome中运行.
$('div').click(function () {
var jqBody = $(document.body);
if (jqBody.css('padding-right') !== '200px') {
jqBody.animate({
'padding-right': '200px'
}, 500);
} else {
jqBody.animate({
'padding-right': '0'
}, 500);
}
});
是否有意义改变文档正文填充是另一个问题.我的目标是将所有页面内容从右边缘移开200像素,以便为那里的绝对定位的侧边栏div元素保留一些空间.我通过将页面内容包装到div元素而不是body padding-right来实现这一点,我现在正在更改包装器div元素右边距.这种方法在Chrome中也能顺利运行.
两年前，其他人偶然发现了同样的错误，这个解决方案对我有用。
我无法相信为什么 Chrome 还没有修复这个问题。无论如何，这是一个更新的小提琴，其中填充动画也可以在 Chrome 中使用。代码可以更干净，但我懒得让它整洁:)
$('div').click(function () {
var jqBody = $(document.body);
if (jqBody.css('padding-right') !== '200px') {
jqBody.animate({
'padding-right': '200px'
}, {
duration: 500,
step: function () {
this.style.display = 'none';
this.offsetHeight;
this.style.display = 'block';
}
});
} else {
jqBody.animate({
'padding-right': '0'
}, {
duration: 500,
step: function () {
this.style.display = 'none';
this.offsetHeight;
this.style.display = 'block';
}
});
}
});
这里肯定有一个缺点。在每个动画步骤中，元素的显示切换为无，读取 offsetHeight 并将显示切换回块。这也会给 Firefox 等浏览器带来开销，因为它在动画正文填充方面没有任何问题。另外，我不确定这样的东西是否可以用于非块元素，但在我的情况下我不需要担心这一点。
| 归档时间： |
|
| 查看次数： |
611 次 |
| 最近记录： |