Question

我不知道如何用简短的句子解释这件事。我不知道它是不是错误..

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

我试图搜索这个问题，因为它应该很常见。但没有出现。

用文字解释真的很难。只需看看这个带有mozilla的jquery示例，然后再使用chrome。 https://jsfiddle.net/zvwcdzjz/2/#

P.S。我需要原始的示例工作，并且在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并添加右：0;同时将所有内部内容包装在div中，并将宽度设置为225px

PMOD1_CD IN ('D')

Answer 4

您是否尝试过点击2个按钮而不滚动？试试吧。看起来您使用的是visibility: hidden;而不是display: none;。也许试图设置position: relative; ...

刚刚看过jquery脚本。 Show()和hide()似乎可以作为visibility css属性使用。如果你看看Chrome DevTools的jsFiddle示例，你会看到你看不到红色框，但它们仍在那里。

在显示隐藏元素时，由于滚动，它仅显示在错误的位置

4 个答案: