使用snap css时出现一些问题：
在此示例中，捕捉不起作用。如果删除“字体家族：“蒙特塞拉特”，无衬线；”从*开始，捕捉效果很好，但单击侧面菜单不起作用时，也可以“流畅滚动”。
我在Google Chrome浏览器（版本69.0.3497.100（正式版本）（64位））上进行了测试
我认为Firefox没问题
所以我需要一种不同的方式来捕捉（也许使用javascript？）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scroll Activated Animation</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,900" rel="stylesheet">
<style type="text/css">
* {
box-sizing: border-box;
margin: 0;
font-family: 'Montserrat', sans-serif;
}
body {
font-family: sans-serif;
-webkit-scroll-snap-type: mandatory;
-ms-scroll-snap-type: mandatory;
scroll-snap-type: mandatory;
-webkit-scroll-snap-points-y: repeat(100vh);
-ms-scroll-snap-points-y: repeat(100vh);
scroll-snap-points-y: repeat(100vh);
-webkit-scroll-snap-type: y mandatory;
-ms-scroll-snap-type: y mandatory;
scroll-snap-type: y mandatory;
}
section {
border-bottom: 1px solid white;
padding: 1rem;
height: 100vh;
scroll-snap-align: start;
text-align: center;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
h1{
font-size: 4em;
}
.sidebar{
height: 33%;
width: 4%;
position: fixed;
z-index: 1;
top: 40vh;
right: 2vw;
display: flex;
flex-direction: column;
align-items: center;
}
.sidebar a {
padding: 10px 0;
text-decoration: none;
font-size: 25px;
font-weight: 900;
display: block;
opacity: .3;
}
.sidebar a:hover {
color: black;
opacity: 1;
}
</style>
</head>
<body>
<div class="sidebar">
<a href="#one">1</a>
<a href="#two">2</a>
<a href="#three">3</a>
<a href="#four">4</a>
<a href="#five">5</a>
</div>
<section id="one" style="background-color: blue;">
<h1>Section One</h1>
</section>
<section id="two" style="background-color: red;">
<h1>Section Two</h1>
</section>
<section id="three" style="background-color: brown;">
<h1>Section Three</h1>
</section>
<section id="four" style="background-color: yellow;">
<h1>Section Four</h1>
</section>
<section id="five" style="background-color: green;">
<h1>Section Five</h1>
</section>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script>
// Select all links with hashes
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.click(function(event) {
// On-page links
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({scrollTop: target.offset().top}, 1000, function() {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) { // Checking if the target was focused
return false;
}
else {
$target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
};
});
}
}
});
</script>
</body>
</html>