Question

对于以下代码，垂直滚动条似乎根本不向下滚动以查看文本？任何帮助非常感谢。尝试改变溢出和定位，但没有奏效。也许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>

Answer 1

您需要将文本包装在具有某种定位的容器中（相对应该适用于所有目的），否则它将留在另一个定位元素后面。这是一个例子：http://jsfiddle.net/VkQ67/1/

垂直滚动不起作用

1 个答案: