问滚动溢出y的snap属性将导致页面滚动
EN

Stack Overflow用户

提问于 2018-02-02 08:01:32

回答 2查看 3K关注 0票数 6

我使用css属性卷轴式将溢出的div快照的内容放在滚动页上。

它很容易应用：

.container {
  height: 400px;
  overflow-y: scroll;
  scroll-snap-type: mandatory;
}

.contents {
  scroll-snap-align: start;
}

看看Safari 11+ on桌面中的这个页面，举个例子--在页面左侧的div上滚动https://codepen.io/fionnbharra/full/PQZmav/。注意滚动完成时div是如何对齐到容器顶部的。这是意料之中的行为。

我的问题是，当我们有一个很长的页面时，它就会崩溃-- https://codepen.io/fionnbharra/full/oEbWeq/

尝试在相同的溢出div上滚动。注意页面正文如何同时滚动，这意味着很难看到原始内容滚动。

这是个虫子吗？我做错了什么吗？

css

safari

腾讯云OCR文字识别特惠

文字识别限时抢购，热门产品低至14.9元

回答 2

Stack Overflow用户

发布于 2018-02-07 12:11:30

这是实验技术，只是部分支持。Chrome现在不支持它(2018-02-07)。https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type

你现在应该使用其他的风格。滚动链系列可以被相对定位的额外容器所取代。

https://caniuse.com/#feat=css-snappoints

浏览器通常不会实现它或部分实现。使用其他CSS样式。

顺便说一下。如果您希望确保正确支持样式，请使用caniuse.com。

票数 2

Stack Overflow用户

发布于 2018-02-08 16:51:30

这似乎是Safari的做法，当它抓取div时，它将滚动事件传播到链上，导致整个窗口滚动，但考虑到这是一种实验技术，我并不感到太惊讶。解决这一问题的一种方法是在使用html滚动时将overflow元素的hidden设置为hidden，并在完成时重新设置它：

const container = document.getElementsByClassName('container')[0];
const html = document.documentElement;

let scrollTimer = -1;
let locked = false;

function lock() {
  if (!locked) {
    locked = true;
    html.style.overflow = 'hidden';
  }
}

function unlock() {
  if (locked) {
    locked = false;
    html.style.overflow = '';
  }
}

container.addEventListener('scroll', () => {
  if (scrollTimer !== -1) {
    clearTimeout(scrollTimer);
  }

  if (container.scrollTop <= 0 ||
      container.scrollTop >= container.scrollHeight - container.offsetHeight) {
    // if scrollbar reaches top or bottom, unlock
    unlock();
  } else {
    lock();
    // defer unlocking scroll
    scrollTimer = setTimeout(unlock, 150); // consider 150ms of inactivity to be the end of a scroll
  }
}, false);

main {
  background: #D7FCD4;
  display: flex;
}

.container {
  height: 400px;
  flex: 1;
  overflow-y: scroll;
  scroll-snap-type: mandatory;
}

.contents {
  display: block;
  height: 100px;
  margin-bottom: 10px;
  width: 100%;
  scroll-snap-align: start;
}

.contents:nth-child(even) {background: #B68F40}
.contents:nth-child(odd) {background: #545454}

.more-stuff {
  background: linear-gradient(#30011E, #fff);
  border-left: 10px solid white;
  display: block;
  height: 2000px;
  flex: 1;
}

<main>

<div class="container">
  <div class="contents"></div>
  <div class="contents"></div>
  <div class="contents"></div>
  <div class="contents"></div>
  <div class="contents"></div>
  <div class="contents"></div>
  <div class="contents"></div>
  <div class="contents"></div>
  <div class="contents"></div>
  <div class="contents"></div>
  <div class="contents"></div>
  <div class="contents"></div>
  <div class="contents"></div>
  <div class="contents"></div>
  <div class="contents"></div>
  <div class="contents"></div>
  <div class="contents"></div>
  <div class="contents"></div>
  <div class="contents"></div>
  <div class="contents"></div>
  <div class="contents"></div>
  <div class="contents"></div>
  <div class="contents"></div>
  <div class="contents"></div>
  <div class="contents"></div>
  <div class="contents"></div>
  <div class="contents"></div>
  <div class="contents"></div>
  <div class="contents"></div>
  <div class="contents"></div>
</div>

<div class="more-stuff">
 </div>
  
</main>