Question

搜索此问题找不到正确的答案，但是我敢肯定我不是唯一遇到此问题的人。

我确实有一个很宽的页面（高度超过10000px），带有很多。使用此CSS类将其中一些设置为显示：隐藏高度和零高度：

.invisible {
    visibility:hidden;
    height:0px;
    margin:0 !important;
    padding:0 !important;
    border-width:0 !important;
    min-height:0 !important;
}

所以我的html基本上是这样的（我省略了结束标记）：

<div class="invisible">
<div class="invisible">
<div class="invisible">
<div class="invisible">
<div class="invisible">
<div class="invisible">
<div>
<div class="invisible">
<div>
<div>
<div>
<div>
<div class="invisible">
<div class="invisible">
<div class="invisible">
<div>
<div>
<div>
<div>

因此，如果我在页面中间并切换所有.invisible类，则页面会高很多（因为所有.invisible的div都恢复了它们的实际高度），而位于该元素上的元素屏幕不再显示。

这正是我想要实现的目标：在切换之后将切换前的元素保留在屏幕上，这样用户就不会真正注意到任何滚动。

我可以想到一种方法： 1）以某种方式找出屏幕上的哪个元素以及它离屏幕顶部有多远（这就是我在这个想法上失败的地方） 2）切换时，按住scol直到再次完全达到此状态

由于我的JS不太好，也许有比我最初的想法更好的方法...

最好的问候菲利普

Answer 1

我能够使用document.elementFromPoint进行操作，下面有一个有效的演示程序，但它似乎无法在SO的沙箱中100％正常工作，因此请检查https://jsbin.com/hozazusone/1（可能需要一些技巧-调整）：

$('#toggle').on('click', function(){
  var top = $(document.elementFromPoint(window.innerWidth/2, 10))
  var howMuchFromTop = top.offset().top - window.scrollY
  $('.invisible').removeClass('invisible').addClass('red')
  window.scrollTo(0, top.offset().top - howMuchFromTop)
})

.invisible {
    visibility:hidden;
    height:0px;
    margin:0 !important;
    padding:0 !important;
    border-width:0 !important;
    min-height:0 !important;
}

div {
  background: #cccaaa;
  height: 110px;
  margin: 4px 0 0 0;
}

.red {
  background: red;
}


#toggle {
  position: fixed;
  top: 0;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>1</div>
<div>2</div>
<div class="invisible">3</div>
<div class="invisible">4</div>
<div>5</div>
<div class="invisible">6</div>
<div>7</div>
<div class="invisible">8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div class="invisible">13</div>
<div class="invisible">14</div>
<div class="invisible">15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
  <div>20</div>
  <div>21</div>
  <div>22</div>
  
  
  <button id="toggle">toggle</button>

当上方/下方的元素切换可见/不可见时，保持滚动位置

1 个答案: