随着主滚动条的滚动，div元素也跟随滚动

Question

随着主滚动条的滚动，div元素也跟随滚动

htmlcss

4

我正在处理的网页只有一个主内容div，它被固定了大小。我希望可以通过浏览器窗口滚动条来滚动它，而不是“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>

- GuberX

2个回答

0

这段代码用于使用浏览器的主滚动条滚动页面主体或 div 元素。您可以通过按 Switch 按钮在它们之间切换。它计算元素高度与页面主体高度的比例，并保存最后的滚动位置。适用于 Chrome、Firefox、IE、Opera 和 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>

- Dogan Sur

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zhihao · Accepted Answer

浏览器窗口滚动条是由浏览器“创建”的，因此我认为您将无法直接控制滚动条的位置或其滚动的页面部分。话虽如此，我认为通过滚动整个页面，但只让它“看起来”像一个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内容。