自定义Div滚动
自定义Div滚动
提问于 2018-09-12 03:43:32
我有以下超文本标记语言和CSS (http://jsfiddle.net/7zo4Lch5/3/)。
<div class="div_top_view">
<div class="div_top_left">
<div class="div_left_menu">
<p>Left Menu</p>
<p>Left Menu</p>
<p>Left Menu</p>
<p>Left Menu</p>
<p>Left Menu</p>
</div>
</div>
<div class="div_top_right">
<img class="img" src="http://worldartsme.com/images/sheet-of-paper-clipart-1.jpg" />
</div>
</div>
<div class="div_divider">
</div>
<div class="div_bottom_view">
<p>Bottom View</p>
</div>正如你所看到的，滚动条出现在"div_top_view“的右边。此滚动条可同时滚动"div_top_left“和"div_top_right”。
我想要一个滚动条上的"div_top_left“和另一个"div_top_right”，如果需要，滚动每个div独立。如何才能做到这一点？
此外，"div_top_right“中有一个大图像。它需要一个垂直滚动条和一个水平滚动条。水平滚动条仅在滚动到底部时才会出现。怎样才能让这个水平滚动条始终可见？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-09-12 06:58:21
我的解决方案不需要flexbox，但需要更改您的html。目前，您的第一个div：<div class="div_top_view">具有嵌套在其中的右上视图和左上视图。这就是阻止你实现单独滚动功能的原因。检查下面的代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="div_top_view">
<div class="div_top_left">
<div class="div_left_menu">
<p>Left Menu</p>
<p>Left Menu</p>
<p>Left Menu</p>
<p>Left Menu</p>
<p>Left Menu</p>
<p>Left Menu</p>
<p>Left Menu</p>
<p>Left Menu</p>
<p>Left Menu</p>
<p>Left Menu</p>
<p>Left Menu</p>
<p>Left Menu</p>
<p>Left Menu</p>
<p>Left Menu</p>
<p>Left Menu</p>
<p>Left Menu</p>
<p>Left Menu</p>
</div>
</div>
</div>
<div class="div_top_view2">
<div class="div_top_right">
<img class="img" src="http://worldartsme.com/images/sheet-of-paper-clipart-1.jpg" />
</div>
</div>
<div class="div_divider">
<span>I am in the divider and should not have this div here</span>
</div>
<div class="div_bottom_view">
<p>Bottom View</p>
</div>
</body>
</html>我所做的就是为右上角创建了一个新类。给右上角一个固定的高度可以解决水平可见滚动条的问题。我还给出了右上角div的绝对位置，并将其固定在屏幕的右上角。另外，我还更改了左上角的div，使其具有50%的宽度，如下所示：
.div_top_view2 {
position: absolute;
top:0;
right:0;
height: 50%;
overflow-x: auto;
overflow-y: visible;
width:50%;
}
.div_top_right {
width: auto;
/*max-width: 1000px;*/
text-align: center;
border-left: 2px solid black;
overflow-x: auto;
overflow-y: auto;
height: 100%;
/*overflow: auto;*/
}
.div_top_view {
position: relative;
height: 50%;
overflow-x: auto;
overflow-y: auto;
width: 50%;
}Check fiddle：http://jsfiddle.net/7zo4Lch5/57/
我希望这就是你要找的东西！
万事如意:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52283169
复制相关文章
相似问题
腾讯云开发者
