Javascript 在隐藏元素的显示上，由于滚动，它显示在错误的位置，仅在chrome中显示

我真的不知道如何用简短的句子来解释这件事。 我不知道是不是虫子

在具有固定高度和overflow-y滚动的父div中，我有多个子元素，它具有jquery函数click，在这些div中显示隐藏元素的内容。当我向下滚动到最后一个div时，单击后，隐藏元素显示在错误的位置

我试图寻找这个问题，因为它应该是很常见的。但是什么也没发生

很难用语言来解释。只需看看这个使用mozilla的jquery示例，然后再看看chrome。

p.S.我需要我的原始示例，在chrome和mozilla上看起来完全一样，因为现在在mozilla上，一切看起来都和我想要的完全一样，但在chrome上有bug。 它也可以用jQuery解决，对我来说没什么区别

HTML:

JS:

设置的#el高度导致红色框出现在不正确的位置。我已经删除了这个。请参见下面的示例：

更改：

#el {
  width: 300px;
  height: 400px;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: rgba(0,0,0,0.1);
}

致：

---

然后你就可以走了

为了使您的生活更简单，将parent.bloc设置为相对的，这样blocktoopen将相对计算。这将有助于提高反应能力

.block {
  width: 300px;
  height: 200px;
  margin-top: 10px;
  background-color: rgba(0,0,0,0.2);
position: relative; 
}

.blocktoopen {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%; 
bottom: 50%;  
  background-color: red;
  display: none;
 right: 0;
}

---

我不能发表评论，所以这里是另一个尝试。我不确定你是否也有水平卷轴。从.blocktoopen中删除右边距并添加右边距：0；还可以将所有内部内容包装在一个div中，并将宽度设置为225px

#el {
  width: 300px;
  height: 400px;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: rgba(0,0,0,0.1);
}
#el .content {
  width: 300px;
  height: auto;
}
.block {
  width: 300px;
  height: 200px;
  margin-top: 10px;
  background-color: rgba(0,0,0,0.2);
  position: relative; 
}
.button {
  background-color: blue;
  color: #fff;
  cursor: pointer;
  text-align: center;
  margin-top: 90px;
  float: left;
}
.blocktoopen {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
  display: none;
  top: 50%; 
  bottom: 50%; 
  right: 0;
}

.internal{
  width: 225px;
  }

---

您是否尝试过在不滚动的情况下单击两个按钮？试试看。看起来您使用的是

可见性：隐藏和非
显示：无。可能试图设置
位置：相对

刚刚看到jquery脚本
Show（）
和
hide（）
显示为
visibility
css属性。
如果你使用Chrome DevTools查看JSFIDLE示例，你会发现你看不到红色框，但它们仍然在那里。
那么期望的结果是什么？期望的结果是，滚动条底部的最后一个块应该出现在与其前面的块相同的位置。铬合金的颜色太低了。在Firefox中，它看起来很好。就像ketchup说的，当滚动到底部，点击最后一个块时，红色框出现在错误的位置。我怎么能碰到我的问题？当然可以这样解决。但我在我的网站上的位置有限。我需要限制高度，并使用滚动查看更多元素。当我将父项更改为“位置：相对”时，会溢出。blocktoopen不可见。但在我的网站中，我的页面溢出，所以这次无法使用..blocktoopen必须在外部，而不是内部。blocktoopen在内部。block已经存在。这是为了让你走上正确的轨道。你可以调整它以符合你的情况。我尝试做的是：当我点击父对象时，位于带溢出y滚动的div中的内容，使显示框位于该父对象和带溢出y滚动的div（.boxtoopen，parents，parents）的外部。您所做的：在.block中使用文本创建了某种内部元素，没有什么区别，并更改了blocktoopen样式，这样即使在mozilla中也不会执行任何我想要的操作（它不会出现，因为它会受到溢出的影响：隐藏在#el上）。如果您没有得到什么，请在mozilla中再次打开我原来的JSFIDLE，然后在chrome中打开。（向下滚动并单击最后一个按钮）
#el {
  width: 300px;
  height: 400px;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: rgba(0,0,0,0.1);
}

#el {
  width: 300px;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: rgba(0,0,0,0.1);
}

.block {
  width: 300px;
  height: 200px;
  margin-top: 10px;
  background-color: rgba(0,0,0,0.2);
position: relative; 
}

.blocktoopen {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%; 
bottom: 50%;  
  background-color: red;
  display: none;
 right: 0;
}

#el {
  width: 300px;
  height: 400px;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: rgba(0,0,0,0.1);
}
#el .content {
  width: 300px;
  height: auto;
}
.block {
  width: 300px;
  height: 200px;
  margin-top: 10px;
  background-color: rgba(0,0,0,0.2);
  position: relative; 
}
.button {
  background-color: blue;
  color: #fff;
  cursor: pointer;
  text-align: center;
  margin-top: 90px;
  float: left;
}
.blocktoopen {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
  display: none;
  top: 50%; 
  bottom: 50%; 
  right: 0;
}

.internal{
  width: 225px;
  }