Question

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

Snap CSS问题

0 个答案: