带有主滚动条的 div 滚动答案

【问题标题】：div scroll with main scrollbar带有主滚动条的 div 滚动
【发布时间】：2012-07-21 00:52:15
【问题描述】：

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

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

基本上我所做的是我在浮动 div 中有一个边缘褪色图像实际上在我的内容 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>

【问题讨论】：

标签： html css

【解决方案1】：

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

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

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 DEMO

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

【讨论】：

嗯，它看起来很有希望，但我似乎无法让它按照我需要的方式工作。我想我需要改变我的“conten_overlap”div。想我可能会把它分成 4 个单独的图像，并让它们在内容框周围加边框，这样至少你可以选择内容。
@GuberX 我同意。我认为拥有单独的 div（或您的情况下的图像）将是最好的方法。如果您在整个内容上只有一张图像（带有透明区域），外观将是相同的，但是用户将无法选择文本。
是的，我知道如果我改变它，我将能够弄清楚“滚动”方面。现在我有一个带有背景图像的“content_overlap”div，其中心（内容区域）透明，但内容区域内边缘的大约 20px 有一个褪色边缘。因此，任何经过任何方向的内容都会消失。用于覆盖 in div 滚动的滚动条。
@GuberX 您能找到解决问题的方法吗？如果是这样，您会发布它并单击帖子左上角的复选标记以标记正确答案吗？这样，其他人也可以从您的问题中受益。
好吧，我确实让它工作了，但它在网站上看起来很难看，所以我没有使用滚动 div。谢谢你们的帮助

【解决方案2】：

此代码用于使用浏览器的主滚动条滚动 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>

【讨论】：