个人中心
gpt4 book ai didi

html - 带主滚动条的 div 滚动

转载 作者：行者123 更新时间：2023-11-28 18:40:30 25 4
gpt4 key购买 nike

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

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

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

我一直在努力使它适用于我的页面，但我不知道如何去做，尤其是我的布局。这是我的页面测试链接:

http://184.66.76.75/gxwd_v2/

所以我正在寻找的是使用浏览器的主滚动条以固定大小滚动“maincontent”div。因此，当内容大于固定大小时，您可以向下滚动内容。对于我的布局，如果我要在 div 中使用 div 滚动条。你不能滚动，因为 div 不是“事件的”。不仅如此，您还可以选择那个 div，因为我的 content_overlap 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>

最佳答案

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

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

关于html - 带主滚动条的 div 滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11588628/

25 4 0
文章推荐： css - CSS/div 的新手...无法添加广告 block
文章推荐： ios - 禁用自动滚动 UITableView
文章推荐： css - 在一个 div 中居中放置三个 div
文章推荐： css - 在容器 div 内 float div
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com