Jquery 浏览器滚动问题答案

【问题标题】：Jquery Browser Scrolling issuesJquery 浏览器滚动问题
【发布时间】：2012-07-11 18:14:36
【问题描述】：

我想测试一个网页是否有一个垂直滚动条来在页面底部添加一些填充像素，以便在底部有一些框时固定位置。问题是，当我测试文档的高度与返回的窗口高度相等时，body 标签的高度也返回 0（body 的高度是动态的，未设置）。下面的函数也不能正常工作：

function hasScroll(el, direction) {
direction = (direction === 'vertical') ? 'scrollTop' : 'scrollLeft';
var result = !! el[direction];
if (!result) {
el[direction] = 1;
result = !!el[direction];
el[direction] = 0;
}
return result;
}

和

(function($){
$.fn.hasScrollBar = function(){ return this.get(0).scrollHeight > this.innerHeight();}
})(jQuery);

css 主体设置为：

body{
font-family:'DINRegular';
margin:0 auto;
padding:0;
font-size:13px;
color:#000;
}

尽管页面中存在滚动条，但始终返回 false。

感谢您的建议。

【问题讨论】：

标签： javascript jquery height scrollbar

【解决方案1】：

您需要在第一次加载文档时检查垂直滚动条，然后在调整窗口大小时检查。所以这是一个粗略的例子。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function() {  
var hasScrollbar = $('body').outerHeight()+16 > $(window).height();
if(hasScrollbar){ 
$('#message').show();
} else {
$('#message').hide();
};
}); 
$(window).resize(function() {
var hasScrollbar = $('body').outerHeight()+16 > $(window).height();
if(hasScrollbar){ 
$('#message').show();
} else {
$('#message').hide();
};
});
</script>
<div style="width:600px;height:600px;border:1px solid blue;">
test -
<div id="message" style="display:none;">has vertical scrollbar</div>
</div>

【讨论】：

谢谢。我会试试你写的。