页面垂直滚动

Question

我有一个关于垂直滚动的问题。我没有任何代码可以显示，但我有一张Chrome设置页面的图片：

我的问题是：如何完成垂直滚动条全部移动到顶部，但它不会滚动整个页面 - 当我们滚动时，历史记录不会移动。我查看了源代码，看起来对所有这些iframe和Chrome链接都很可怕。我甚至不知道是否可以将这些链接包含在商业产品中。我试图在Bootstrap世界中模仿那种行为，但是不能接近这样的事情。有什么暗示去哪个方向？

由于

在建议之后添加了这个简化代码：

div style="overflow:auto;z-index:99999;position:fixed">
<div class="container-fluid" style="min-width:1200px;display:inline-block;">
    <div class="row">
        <div class="col-xs-12"></div>
    </div>
    <div class="row">
        <div class="col-xs-12"></div>
    </div>
    <div class="row">
        <div class="col-xs-12"></div>
    </div>
</div>
</div>

但我没有得到任何滚动。

Answer 1

回答你的问题：

  

如何完成垂直滚动条全部移动到顶部，但它不会滚动整个页面 - 滚动时历史记录不会移动。

使用position: fixed。它停留在同一个地方。

  

我查看了源代码，看起来对所有这些iFrame和Chrome链接都很可怕。我甚至不知道将这些链接包含在商业产品中是否可以。

没有！切勿在任何新产品中使用iFrame。它们仅用于嵌入目的，也适用于跨域嵌入。

  

我试图在Bootstrap世界中模仿那种行为，但是不能接近这样的事情。有什么暗示去哪个方向？

Bootstrap已经在其模态窗口中拥有它。例如，您可以通过以下步骤重新创建它们：

1. 授予body overflow: hidden。{/ li>
2. 制作一个div position: fixed和一个大z-index整个面具。
3. 请务必将overflow: auto提供给此掩码div。
4. 在div内，添加一个包含真实窗口的div。
5. 如果较小的窗口div溢出，则滚动条会显示在主div上，看起来就像body上显示的那样，而body滚动不受影响。

示例代码段为：

window.onload = function() {
  document.getElementById("open-mask").onclick = function() {
    document.body.classList.add('mask-on');
    document.getElementsByClassName("mask")[0].classList.remove('hidden');
    return false;
  };
};

* {
  font-family: 'Segoe UI';
  text-align: justify;
  margin: 0;
  padding: 0;
  margin-bottom: 15px;
  line-height: 1.5;
  box-sizing: border-box;
}
body {
  background-color: #fff;
  padding: 0 15px;
}
.hidden {
  display: none;
}
.mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 99998;
  text-align: center;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.25);
  padding: 150px 0;
  margin: 0;
}
.mask .window {
  display: inline-block;
  width: 50%;
  min-width: 200px;
  background-color: #fff;
  padding: 15px;
}
.mask-on {
  overflow: hidden;
}

<div class="mask hidden">
  <div class="window">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi nemo quos sed, similique fugiat autem? Facere ex hic mollitia, dolore quasi dolor laudantium asperiores! Esse perferendis ratione, porro sequi deserunt.</p>
    <p>Numquam blanditiis obcaecati, quae reiciendis sint consequuntur eaque illo dolorem distinctio animi esse excepturi accusantium magni quam at repellendus expedita reprehenderit earum minima? Facere iusto ipsa quod repudiandae deserunt quibusdam.</p>
    <p>Sint rerum natus asperiores earum atque dolor voluptatem perferendis excepturi, repellat nemo sequi neque, vel architecto provident deserunt commodi soluta quis voluptatum vitae iure. Aliquid, nihil, iste. A ab, itaque.</p>
    <p>Iste itaque quia corporis dolorem est, voluptas, sunt magni cum neque reiciendis, veritatis incidunt esse ratione consectetur exercitationem, cupiditate officia ab repellat maiores illo voluptatibus et ad accusamus. Error, excepturi.</p>
    <p>Tempora non, dolorem unde suscipit voluptatum velit eligendi placeat cumque corporis neque labore quae, id temporibus? Qui quidem a error rem, molestias esse sit dolore asperiores expedita nisi omnis animi?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi nemo quos sed, similique fugiat autem? Facere ex hic mollitia, dolore quasi dolor laudantium asperiores! Esse perferendis ratione, porro sequi deserunt.</p>
    <p>Numquam blanditiis obcaecati, quae reiciendis sint consequuntur eaque illo dolorem distinctio animi esse excepturi accusantium magni quam at repellendus expedita reprehenderit earum minima? Facere iusto ipsa quod repudiandae deserunt quibusdam.</p>
    <p>Sint rerum natus asperiores earum atque dolor voluptatem perferendis excepturi, repellat nemo sequi neque, vel architecto provident deserunt commodi soluta quis voluptatum vitae iure. Aliquid, nihil, iste. A ab, itaque.</p>
    <p>Iste itaque quia corporis dolorem est, voluptas, sunt magni cum neque reiciendis, veritatis incidunt esse ratione consectetur exercitationem, cupiditate officia ab repellat maiores illo voluptatibus et ad accusamus. Error, excepturi.</p>
    <p>Tempora non, dolorem unde suscipit voluptatum velit eligendi placeat cumque corporis neque labore quae, id temporibus? Qui quidem a error rem, molestias esse sit dolore asperiores expedita nisi omnis animi?</p>
  </div>
</div>
<p>
  <a href="javascript:;" id="open-mask">Open Mask</a>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis doloremque veritatis ipsam! Odit id a consectetur earum molestias, reiciendis quam ad molestiae maxime impedit magni blanditiis, omnis sunt neque nihil.</p>
<p>Similique iure vitae, qui nostrum necessitatibus modi sequi odio nobis, eius molestias placeat, quos debitis? Aspernatur deserunt doloribus laboriosam illo pariatur asperiores quo officia iusto accusantium, saepe, provident qui facilis!</p>
<p>Ducimus, repudiandae dolores. Error animi vitae dolore, aliquam eius eos quidem veritatis debitis blanditiis. Dignissimos, commodi consequuntur. Et, inventore nulla quae, ad maxime animi iste. Voluptas nihil mollitia tempore unde!</p>
<p>Cumque qui expedita perspiciatis quia sunt suscipit adipisci! Architecto nesciunt exercitationem alias esse earum iste beatae nihil id obcaecati adipisci quaerat accusamus eaque blanditiis, mollitia, placeat modi, deserunt perferendis maxime.</p>
<p>Magnam veritatis perspiciatis ex optio consequatur dolore culpa, nostrum quibusdam illo inventore fugiat explicabo unde magni, voluptatem asperiores laboriosam commodi impedit nemo molestiae. Libero dolores modi magnam fugit. Autem, cum.</p>
<p>Sit voluptatibus quasi, voluptatem tempora culpa sed esse animi ut quas eligendi quos sequi amet, molestiae officia nulla laboriosam dolorem ipsum vel earum laudantium! Nihil blanditiis, a esse incidunt molestiae.</p>
<p>Aut recusandae at fugit ad officia fuga odio, dolorem vitae, natus neque laborum porro provident illum accusamus inventore vel tempora similique maxime soluta ab culpa. Sit consequuntur consectetur accusantium distinctio.</p>
<p>Doloribus dignissimos praesentium, tempore, distinctio perspiciatis quas enim repellat eos eius omnis ratione blanditiis unde dolorum, mollitia. Doloremque, nisi amet, tenetur libero dolorem quis natus ducimus vitae, eveniet ratione commodi.</p>
<p>Alias, facilis, sit. Dolorem, blanditiis. Qui vel modi sunt, architecto optio saepe quo culpa. Atque iste velit unde assumenda quasi, amet nesciunt vitae id quo, eum eveniet ducimus. A, libero.</p>
<p>Id expedita, quas, tempore est vitae aspernatur sit sequi odio necessitatibus omnis totam nihil unde nulla eaque tempora, voluptate? Inventore soluta, consectetur animi sit alias ab veniam qui officia incidunt.</p>
<p>Placeat quas, maiores accusamus odio laudantium. Possimus accusamus beatae, architecto porro. Sunt in neque, atque, minima odio pariatur maiores, consectetur dolorem recusandae rem, eveniet possimus aut repudiandae numquam ad saepe!</p>
<p>Rem officiis molestiae ipsam veritatis soluta in assumenda culpa voluptatibus quo modi necessitatibus beatae mollitia officia deleniti ullam neque, qui, porro nesciunt maxime! Veritatis aut aliquam sunt impedit repudiandae iusto.</p>
<p>Autem labore quod magnam. Enim ad dolorem, reprehenderit repellendus architecto, officia quis nihil quia laudantium totam nisi velit neque voluptatibus saepe cum in unde consectetur quidem non omnis, consequatur praesentium.</p>
<p>Cupiditate ipsam, animi esse exercitationem, neque tempora eum aperiam. Illum adipisci minima necessitatibus quae, laudantium assumenda suscipit, quas, natus corporis temporibus voluptatum officiis molestias obcaecati culpa provident nisi maxime possimus!</p>
<p>Voluptatibus cumque eius illum esse laudantium tempora consequuntur unde harum, voluptates dolor ex quidem, tenetur, enim culpa ullam similique dolorum corporis nam voluptas voluptatum. Aperiam nam saepe earum sequi laudantium.</p>

注意：您需要重新运行代码段以关闭模式弹出窗口。