在顯示隱藏元素時，由於滾動，它顯示在錯誤的位置，僅在chrome中

Question

我真的不知道該如何用短句來解釋。 我不知道這是不是bug。

在具有固定高度和y滾動的父div中，我有多個子元素，這些元素具有jquery函數click，這些子元素顯示這些div中的隱藏元素。 當我向下滾動到上一個div時，單擊后隱藏元素顯示在錯誤的位置。

我試圖搜索此問題，因為它應該很常見。 但是什么都沒出現。

真的很難用語言來解釋。 只需使用mozilla查看此jquery示例，然后再使用chrome。 https://jsfiddle.net/zvwcdzjz/2/#

PS我需要我的原始示例工作，並且在chrome和mozilla上看起來完全一樣，因為現在在mozilla上，一切看起來都與我想要的完全一樣，但是在chrome上卻有問題。 它也可以用jQuery解決，對我來說沒有任何區別。

HTML：

<div id="el">
  <div class="content">
    <div class="block">
      <div class="blocktoopen"></div>
      <div class="button">click to open</div>
    </div>
    <div class="block">
      <div class="blocktoopen"></div>
      <div class="button">click to open</div>
    </div>
    <div class="block">
      <div class="blocktoopen"></div>
      <div class="button">click to open</div>
    </div>
  </div>
</div>

CSS：

#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);
}
.button {
  background-color: blue;
  color: #fff;
  cursor: pointer;
  text-align: center;
  margin-top: 90px;
  float: left;
}
.blocktoopen {
  width: 50px;
  height: 50px;
  position: absolute;
  margin-left: 300px;
  background-color: red;
  display: none;
}

JS：

$(function(){
    $(".button").click(function(){
    $(this).parent(".block").children(".blocktoopen").show();
  });
  $("#el").scroll(function(){
     $(".blocktoopen").hide(); });
});

Answer 1

#el的設置高度導致紅色框出現在錯誤的位置。 我已經刪除了。 請參閱以下示例：

更改：

#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);
}

然后您就可以開始了。

Answer 2

為了使您的生活更簡單，請將父.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;
}

Answer 3

我無法發表評論，因此這是jsfiddle的另一種嘗試。 我不確定您是否也有水平滾動。 從.blocktoopen刪除margin-right並添加right：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;
  }

Answer 4

您是否嘗試過單擊2個按鈕而不滾動？ 試試吧。 好像您在使用visibility: hidden; 而不display: none; 。 也許試圖設置position: relative; ...

剛看過jquery腳本。 Show()和hide()似乎可以用作visibility CSS屬性。 如果您使用Chrome DevTools的jsFiddle示例，您將看到看不到紅色框，但它們仍然存在。