问题描述
https://codepen.io/team/css-tricks/pen/yLLqqgP
这是重要的部分：
html {
scroll-snap-type: y mandatory;
}
section {
height: 100vh;
scroll-snap-align: start;
}
当将section的高度设置为120或类似高度时，此问题可以得到解决，但这是一个hack。
当我开始使用滚轮滚动时，它将始终滚动两个部分，这使得整个逻辑无法使用。
我正在使用Chrome：86.0.4240.183。
此codepen示例来自：https://css-tricks.com/practical-css-scroll-snapping/，这是css示例的非常著名的资源。
解决方法
不幸的是，这是Chrome中的一个已知错误，是由于对滚动容器使用#define BOOST_ALLOW_DEPRECATED_HEADERS
#include <boost/config.hpp>
#include <boost/graph/adjacency_list.hpp>
#include <boost/graph/boykov_kolmogorov_max_flow.hpp>
#include <boost/graph/edmonds_karp_max_flow.hpp>
#include <boost/graph/graph_utility.hpp>
#include <boost/graph/push_relabel_max_flow.hpp>
#include <boost/property_map/function_property_map.hpp>
int main() {
struct VertexProperty final {};
// struct EdgeProperty final {};
using EdgeProperty = boost::property<boost::edge_capacity_t,int>;
using Graph =
boost::adjacency_list<boost::vecS,boost::vecS,boost::directedS,VertexProperty,EdgeProperty>;
using Edge = boost::graph_traits<Graph>::edge_descriptor;
using Vertex = boost::graph_traits<Graph>::vertex_descriptor;
auto g = Graph{};
auto s = Vertex{};
auto t = Vertex{};
auto residualCapacityMap = std::vector<int>{};
auto reverseEdgeMap = std::vector<Edge>{};
auto colorMap = std::vector<boost::default_color_type>{};
auto predcessorMap = std::vector<Edge>{};
auto distanceMap = std::vector<int>{};
auto vertex_index_map =
boost::make_function_property_map<Vertex>([](Vertex) { return 0; });
auto edge_index_map =
boost::make_function_property_map<Edge>([](Edge) { return 0; });
// auto capacity = boost::make_function_property_map<Edge>( [](Edge) { return 0; });
auto capacity = boost::get(boost::edge_capacity,g);
auto residual_capacity = boost::make_iterator_property_map(
residualCapacityMap.begin(),edge_index_map);
auto reverse_edge_map = boost::make_iterator_property_map(
reverseEdgeMap.begin(),edge_index_map);
auto color_map =
boost::make_iterator_property_map(colorMap.begin(),vertex_index_map);
auto predcessor_map = boost::make_iterator_property_map(
predcessorMap.begin(),vertex_index_map);
auto distance_map = boost::make_iterator_property_map(distanceMap.begin(),vertex_index_map);
auto props = boost::capacity_map(capacity)
.residual_capacity_map(residual_capacity)
.reverse_edge_map(reverse_edge_map)
.vertex_index_map(vertex_index_map)
.color_map(color_map)
.predecessor_map(predcessor_map)
.distance_map(distance_map);
boost::push_relabel_max_flow(g,s,t,props);
boost::push_relabel_max_flow(g,capacity,residual_capacity,reverse_edge_map,vertex_index_map);
boost::boykov_kolmogorov_max_flow(g,vertex_index_map,t);
boost::boykov_kolmogorov_max_flow(g,props);
boost::edmonds_karp_max_flow(g,props);
boost::edmonds_karp_max_flow(g,color_map,predcessor_map);
}
或具有html属性的容器引起的。它只会影响滚轮，而不会影响触控板或移动设备上的触摸滚动。有关问题的说明，请参见this thread。
最简单的解决方案是仅使用嵌套容器来保存滚动，尽管奇怪的是，您可能会注意到滚动快照现在在其上具有较小的延迟。这是当前实施中可以做到的最好的方法：
background-color* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
overflow: hidden;
}
.container {
height: 100vh;
width: 100%;
overflow: auto;
scroll-snap-type: y mandatory;
}
h1 {
width: 100%;
height: 100vh;
scroll-snap-align: start;
border: 2px solid black;
display: flex;
justify-content: center;
align-items: center;
}
不幸的是，一旦意识到<div class="container">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
</div>在某些移动浏览器中也是非静态的（读为：极其简陋），由于实现了缩回UI，该问题就变得更加复杂了，这可能导致{{1 }}层将在容器填满剩余空间之前显示。我今年花了数小时来努力解决这个问题，但仍未想出一个完全令人满意的解决方案，在大多数情况下都可以使媒体查询重置为100vh，并使用JS来应对任何边缘情况。
这是您可以为此添加的一种媒体查询：
html