Question

我正在使用css属性scroll-snap-type将溢出的div snap的内容放在滚动上。

很容易应用：

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

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

在桌面上的Safari 11+ 中查看此页面的示例 - https://codepen.io/fionnbharra/full/PQZmav/ 滚动页面左侧的div。注意何时滚动完成div对齐到容器的顶部。这表现得如预期。

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

尝试滚动同一个溢出div。注意页面主体如何同时滚动，这意味着很难看到原始内容滚动。

这是一个错误吗？我做错了吗？

Answer 1

实验技术仅部分支持。 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。

Answer 2

看起来Safari正在这样做，当它捕捉div时，它会向上传播滚动事件，导致整个窗口滚动，但考虑到这是实验技术，我＆＃39;我不要太惊讶。解决此问题的一种方法是在我们使用JavaScript滚动时将html元素overflow设置为hidden，并在完成后重置它：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

由于目前大多数浏览器都不支持此功能，因此您现在需要在生产中使用基于JavaScript的解决方案。

具有溢出y的Scroll snap css属性导致页面滚动

2 个答案: