滚动特定的 div 标签答案

【问题标题】：Scroll a particular div tag滚动特定的 div 标签
【发布时间】：2015-07-17 21:41:22
【问题描述】：

我有这个代码：

#points{
  width:25%;
  background:#2a2a2a; 
  height:20px; 
  color:white; 
  z-index:2;
  position:absolute;
}
#areas{
  position:absolute;
  color:white; 
  border-right:2px solid black; 
  height:120%;
}

<div class="container" style="width:100%">
  <div class="scale" style="width:100%; position:relative;">
    <div id="points" style="left:0; ">0</div>
    <div id="points" style="left:25%;">25</div>
    <div id="points" style="left:50%;">50</div>
    <div id="points" style=" left:75%;">75</div>
    <div id="points" style=" left:100%;">100</div>
    <div id="points" style=" left:125%;">125</div>
    <div id="points" style=" left:150%;">150</div>
  </div>

  <div class="area" style="width:100%; background:orange;">
    <div id="areas" style="left:0;"></div>
    <div id="areas" style="left:25%;"></div>
    <div id="areas" style="left:50%;"></div>
    <div id="areas" style="left:75%;"></div>
    <div id="areas" style="left:100%;"></div>
    <div id="areas" style="left:125%;"></div>
    <div id="areas" style="left:150%;"></div>
    <div id="areas" style="left:175%;"></div>
  </div>
</div>

滚动到顶部和底部时，我只想滚动area div；我不希望 scale div 在滚动时从容器中隐藏。

我尝试将position: fixed 用于scale div，但它与左滚动不正确，这种情况下只显示0 25 50 75，但每个比例点都对应于区域div标签所以显示所有 div 标签0,25,50,.. 150 和这些对应的areas div 标签

没有positon: fixed还有其他方法吗？

与postion: absolute 一起工作。但是points div 对容器是隐藏的。

position: fixed。左侧 div 标签不可见。

【问题讨论】：

也许您只能滚动 area div 而不能滚动整个 container？将一些固定高度设置为area 和overflow: auto，它应该可以解决问题
@Dygestor 我想滚动整个容器。
您能否创建一个 JSFiddle，以便我们可以准确地看到您想要实现的目标？
不要使用重复的 ID。只是不要。更正你的问题。在那之后，我的猜测是你希望每个“点” div 属于相应的“区域” div？那你为什么不把它们放在一起，那就是每个“点” div 作为“区域” div 的孩子。
@Dygestor 我在我的问题中添加了小提琴

标签： html css

【解决方案1】：

你想要这样的东西吗？

https://jsfiddle.net/qk37kson/ （已编辑：添加了一点 JQuery 使标题水平移动）

1) id 属性必须是唯一的。这就是为什么在 JavaScript 中我们有 getElementById 和 getElementsByClassName。

来自 W3Schools：

http://www.w3schools.com/tags/att_global_id.asp

id 属性为 HTML 元素指定一个唯一的 id。

http://www.w3schools.com/tags/att_global_class.asp

class 属性为一个元素指定一个或多个类名。

2) 改变

 <div class="scale" style="width:100%; position:relative;">

到

 <div id="scale" style="width:100%; position:fixed;">

3) 然后，在您的 CSS 中添加：

#scale {
    top:0px;
    left:0px;
    z-index:2;
}

编辑：

4) 最后，添加一些 JQuery ：

$(window).scroll(function(){
    $('#scale').css('left','-'+$(window).scrollLeft()+'px');
});

【讨论】：

在您的情况下，与points 对应的每一行仅显示0 25 50 75。但我想显示所有点。在那种情况下，position:relative 适合我，但相对位置的问题是当滚动顶部到底部的点从该区域隐藏时。？
哦，我没有看到标题根本无法移动。我添加了一点 JQuery 来完成这项工作。
我没有找到答案，这是我的错误。抱歉，请参阅jsfiddle.net/qk37kson/1。谢谢你为我付出的努力

【解决方案2】：

您可以将.container 的overflow-y 隐藏起来，将.area 的overflow-y 保持滚动。因此，容器将沿 x 滚动 .scale 和 .area 而不是沿 y，但 .area 将在其内部沿 y 滚动，从而产生您的效果。

【讨论】：