垂直滚动不起作用
对于以下代码，垂直滚动条似乎根本没有向下滚动来查看文本？非常感谢任何帮助。尝试过更改溢出和定位，但没有成功。也许是javascipt的问题？或者是css和js之间有冲突？谢谢：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<title>AUTO RESIZE BACKGROUND IMAGE</title>
<script type="text/javascript">
$(document).ready(function() {
$("#triquibackimg").load(function(){
resize_bg();
})
$(window).resize(function(){
resize_bg();
})
function resize_bg(){
$("#triquibackimg").css("left","0");
var doc_width = $(window).width();
var doc_height = $(window).height();
var image_width = $("#triquibackimg").width();
var image_height = $("#triquibackimg").height();
var image_ratio = image_width/image_height;
var new_width = doc_width;
var new_height = Math.round(new_width/image_ratio);
if(new_height<doc_height){
new_height = doc_height;
new_width = Math.round(new_height*image_ratio);
var width_offset = Math.round((new_width-doc_width)/2);
$("#triquibackimg").css("left","-"+width_offset+"px");
}
$("#triquibackimg").width(new_width);
$("#triquibackimg").height(new_height);
}
});
</script>
<style type="text/css">
#triquiback{
left: 0;
top: 0;
position:fixed;
overflow: auto;
zIndex: -9999
}
#triquibackimg{
position:relative
}
</style>
</head>
<body>
<div id = "triquiback">
<img id = "triquibackimg" src = "http://www.lightmedia.hu/hirlevel/sonybmg/foofighters/061124/sajto_2.jpg" />
</div>
<div>
hi
</div>
</body>
</html>
For the following code the vertical scrollbar does not seem to scroll down at all to view the text? Any help greatly appreciated. Have tried changing both overflow and positioning but did not work. Maybe an issue with the javascipt possibly? Or maybe a conflict between the css and js? Thanks:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<title>AUTO RESIZE BACKGROUND IMAGE</title>
<script type="text/javascript">
$(document).ready(function() {
$("#triquibackimg").load(function(){
resize_bg();
})
$(window).resize(function(){
resize_bg();
})
function resize_bg(){
$("#triquibackimg").css("left","0");
var doc_width = $(window).width();
var doc_height = $(window).height();
var image_width = $("#triquibackimg").width();
var image_height = $("#triquibackimg").height();
var image_ratio = image_width/image_height;
var new_width = doc_width;
var new_height = Math.round(new_width/image_ratio);
if(new_height<doc_height){
new_height = doc_height;
new_width = Math.round(new_height*image_ratio);
var width_offset = Math.round((new_width-doc_width)/2);
$("#triquibackimg").css("left","-"+width_offset+"px");
}
$("#triquibackimg").width(new_width);
$("#triquibackimg").height(new_height);
}
});
</script>
<style type="text/css">
#triquiback{
left: 0;
top: 0;
position:fixed;
overflow: auto;
zIndex: -9999
}
#triquibackimg{
position:relative
}
</style>
</head>
<body>
<div id = "triquiback">
<img id = "triquibackimg" src = "http://www.lightmedia.hu/hirlevel/sonybmg/foofighters/061124/sajto_2.jpg" />
</div>
<div>
hi
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您需要将文本包装在具有某种定位的容器中（相对应该适合所有目的），否则它将保留在其他定位元素的后面。这是一个示例： http://jsfiddle.net/VkQ67/1/
You need to wrap your text in a container which has some kind of positioning (relative should be fine for all purposes), otherwise it'll stay behind the other positioned element. Here's an example: http://jsfiddle.net/VkQ67/1/