3

我目前正在处理的网页只有一个设置为固定大小的主要内容 div。我想使用浏览器窗口滚动条而不是“in div”滚动条使其可滚动。

内容 div 大小为宽度：1076px，高度：475px

基本上我所做的是我在浮动 div 中有一个边缘褪色图像实际上在我的内容 div 上，所以如果我要使用 div 内的滚动条，我将无法选择它或单击它，因为浮动分区。所以我正在寻找一些帮助来让滚动条与我的布局一起使用。

我一直在尝试让它为我的页面工作，但我不知道如何去做，尤其是我的布局。这是我的页面的测试链接：

http://184.66.76.75/gxwd_v2/

所以我正在寻找的是使用浏览器中的主滚动条来滚动具有固定大小的“maincontent”div。因此，当内容大于固定大小时，您可以向下滚动内容。使用我的布局，如果我要在 div 中使用 div 滚动条。你不能滚动，因为 div 不是“活动的”。不仅如此，由于我的 content_overlap div，您可以选择该 div，它浮动在内容框上。

CSS 文件：

body {
background-color: #000000;
background-image: url(images/background.png);
background-repeat: no-repeat;
background-position: center;
margin: 0px auto;
padding: 0px;
color: #000000;
overflow: hidden;
}

/* ~~ this fixed width container surrounds all other elements ~~ */
.container {
width: 1076px;
height: 530px;
margin: 220px auto; /* the auto value on the sides, coupled with the width, centers the layout */
}

/* ~~ This is the layout information. ~~ */
.menu {
width: 800px;
margin-left: 13%;
margin-right: 13%;
text-align: center;
}
.content {
padding: 0px 0px;
}
.content_overlap {
width: 1079px;
height: 504px;
background-image: url(images/fade.png);
background-position: top;
background-repeat: no-repeat;
position: absolute;
top: 252px;
left: 50%;
margin-left: -538px;
}
.maincontent {
position: relative;
top: 20px;
max-width: 1076px !important;
max-height: 460px !important;
overflow: auto;
padding: 0px 0px 0px 0px;
}

PHP 文件：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>GuberX Web Development &amp; Design</title>
<link rel="stylesheet" type="text/css" href="oneColFixCtr.css">
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="mobile.css">
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4s.css" />
<link rel="stylesheet" media="only screen and (min-device-width: 481px)" href="desktop.css" type="text/css">
<meta name="viewport" content="initial-scale=0.5">
</head>

<body>

<div class="container">
  <div class="content">
<div class="menu"><img src="images/menu/home-1.png"><img src="images/menu/spacer.png"><img src="images/menu/portfolio-1.png"><img src="images/menu/spacer.png"><img src="images/menu/services-1.png"><img src="images/menu/spacer.png"><img src="images/menu/contact-1.png"></div>
    <div class="maincontent">
        Test Possition of Text and whatnot1<br />
        Test Possition of Text and whatnot2<br />
        Test Possition of Text and whatnot3<br />
        Test Possition of Text and whatnot4<br />
        Test Possition of Text and whatnot5<br />
        Test Possition of Text and whatnot6<br />
        Test Possition of Text and whatnot7<br />
        Test Possition of Text and whatnot8<br />
        Test Possition of Text and whatnot9<br />
        Test Possition of Text and whatnot10<br />
        Test Possition of Text and whatnot11<br />
        Test Possition of Text and whatnot12<br />
        Test Possition of Text and whatnot13<br />
        Test Possition of Text and whatnot14<br />
        Test Possition of Text and whatnot15<br />
        Test Possition of Text and whatnot16<br />
        Test Possition of Text and whatnot17<br />
        Test Possition of Text and whatnot18<br />
        Test Possition of Text and whatnot19<br />
        Test Possition of Text and whatnot20<br />
        Test Possition of Text and whatnot21<br />
        Test Possition of Text and whatnot22<br />
        Test Possition of Text and whatnot23<br />
        Test Possition of Text and whatnot24<br />
        Test Possition of Text and whatnot25<br />
        Test Possition of Text and whatnot26<br />
        Test Possition of Text and whatnot27<br />
        Test Possition of Text and whatnot28<br />
        Test Possition of Text and whatnot29<br />
        Test Possition of Text and whatnot30<br />
    </div>
</div><!-- end .content -->
<div class="content_overlap"></div>  <!-- This div has a background image that has fading edges for the content box --!>
</div><!-- end .container -->
</body>
</html>
4

2 回答 2

2

浏览器窗口滚动条是由浏览器“创建”的，因此我认为您无法直接控制滚动条的位置或滚动页面的哪个部分。话虽如此，我认为可以通过滚动整个页面来获得您想要的效果，但只能让它看起来好像 div 正在滚动。

这可以通过创建一个“窗口”来完成，如果你愿意的话，用户可以“查看div”。我很难解释这个想法，所以这里是代码：

HTML

<div id="screenTop" class="screen"></div>
<div id="screenLeft" class="screen"></div>
<div id="screenRight" class="screen"></div>
<div id="screenBot" class="screen"></div>

<div id="container">

    <div id="content">
        Test Possition of Text and whatnot1<br />
        Test Possition of Text and whatnot2<br />
        Test Possition of Text and whatnot3<br />
        Test Possition of Text and whatnot4<br />
        Test Possition of Text and whatnot5<br />
        Test Possition of Text and whatnot6<br />
        Test Possition of Text and whatnot7<br />
        Test Possition of Text and whatnot8<br />
        Test Possition of Text and whatnot9<br />
        Test Possition of Text and whatnot10<br />
        Test Possition of Text and whatnot11<br />
        Test Possition of Text and whatnot12<br />
        Test Possition of Text and whatnot13<br />
        Test Possition of Text and whatnot14<br />
        Test Possition of Text and whatnot15<br />
        Test Possition of Text and whatnot16<br />
        Test Possition of Text and whatnot17<br />
        Test Possition of Text and whatnot18<br />
        Test Possition of Text and whatnot19<br />
        Test Possition of Text and whatnot20<br />
        Test Possition of Text and whatnot21<br />
        Test Possition of Text and whatnot22<br />
        Test Possition of Text and whatnot23<br />
        Test Possition of Text and whatnot24<br />
        Test Possition of Text and whatnot25<br />
        Test Possition of Text and whatnot26<br />
        Test Possition of Text and whatnot27<br />
        Test Possition of Text and whatnot28<br />
        Test Possition of Text and whatnot29<br />
        Test Possition of Text and whatnot30<br />
        Test Possition of Text and whatnot31<br />
        Test Possition of Text and whatnot32<br />
        Test Possition of Text and whatnot33<br />
        Test Possition of Text and whatnot34<br />
        Test Possition of Text and whatnot35<br />
        Test Possition of Text and whatnot36<br />
        Test Possition of Text and whatnot37<br />
        Test Possition of Text and whatnot38<br />
        Test Possition of Text and whatnot39<br />
        Test Possition of Text and whatnot40<br />
    </div>

</div>

CSS

.screen {
    position: fixed;
    background: black;
}
#screenTop, #screenBot {
    height: 100px;
    width: 100%;
}
#screenLeft, #screenRight {
    height: 100%;
    width: 100px;
}
#screenTop { top: 0; }
#screenLeft { left: 0; }
#screenRight { right: 0; }
#screenBot { bottom: 0; }

#content { margin: 100px; }

jsFiddle 演示

从您提供的链接来看，我认为您可以将这个想法融入您当前的布局中。这样做的缺点是它依赖于position: fixed获得你想要的效果。基本上，您可以使用浏览器滚动条滚动整个页面，也可以使用 div 滚动条滚动 div 内容。

于 2012-07-21T01:17:42.823 回答
0

此代码用于使用浏览器的主滚动条滚动 body 元素或 div 元素。您可以按切换按钮在它们之间切换。它计算元素的高度超过身体高度并保存最后的滚动位置。适用于 chrome、firefox，即歌剧和 safari。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    var scOpts = { st:0, bodyst:0, contst:0, rt1:1, rt2:1, bodyhei:0, p:0 };

    $(document).ready(function() {
        $(document).on('scroll', function(e) {
            e.preventDefault();
            scOpts.st = $(document).scrollTop();
            var top = scOpts.st * scOpts.rt2;
            if(scOpts.p == 1)   $('#sc').scrollTop(top);
        });
    });

function switchContainer() {
    if(scOpts.p == 0) {
        var wnhei = $(window).height();
        var schei = $('#sc').height();
        scOpts.rt1 = document.getElementById('sc').scrollHeight / schei;
        scOpts.rt2 = schei / wnhei; 

        var bh = (wnhei * scOpts.rt1);
        scOpts.bodyhei = $('body').height();
        scOpts.bodyst = scOpts.st;

        $('#scont').css({ position:'fixed', overflow:'hidden' });
        $('body').innerHeight(bh);
        $('#scont').css('top', (scOpts.st * -1)/* + 50*/); // padding-top of body element
        window.scrollTo(0, scOpts.contst);
    } else {
        scOpts.contst = scOpts.st;

        $('#scont').css({ position:'static', overflow:'visible' });
        $('body').height(scOpts.bodyhei);
        window.scrollTo(0, scOpts.bodyst);
    }
    scOpts.p = (scOpts.p+1)%2;
}
</script>
<style>

html { margin:0; padding:0; }
body { margin:0; padding:0; overflow-y:scroll; }
#scont { height:100%; margin:0 auto; left:0px; right:0px; }

</style>
</head>
<body>

<div id="sc" style="position:fixed;left:10px; top:10px; width:300px;height:200px;overflow:hidden;border:1px solid #e1e2e3;background-color:#ffffff;">
1<br>
2<br>
3<br>
4<br>
5<br>
6<br>
7<br>
8<br>
9<br>
10<br>
11<br>
12<br>
13<br>
14<br>
15<br>
</div>
<div id="scont">
<div style="height:750px;padding-top:350px;margin-left:30px;background-color:#fff000;">abcdefg</div>
</div>
<input type="button" value="Switch" onclick="switchContainer();" style="position:fixed;top:250px;">
</body>
</html>
于 2013-10-30T16:15:25.363 回答