Prinzhorn / skrollr

Stand-alone parallax scrolling library for mobile (Android + iOS) and desktop. No jQuery. Just plain JavaScript (and some love).
http://prinzhorn.github.io/skrollr/
MIT License
18.53k stars 3.51k forks source link

Scroll to a specific position on mobile #837

Open peterlunglum opened 7 years ago

peterlunglum commented 7 years ago

I'm trying to have an onclick event that takes a user to a position on the page with the skrollr library, but whenever I try to do so, I get the following error:

Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080 skrollr.min.js:2

As it is I am using the following javascript which I don't believe to be inhibiting the click behavior.


                function scrollAbout() {
                    document.getElementById("nav").style.height = "0%";
                    window.scroll({
                        top: 2180, 
                        behavior: 'smooth' 
                    });
                }

                function openNav() {
                event.preventDefault();
                    document.getElementById("nav").style.height = "100%";
                }

                function closeNav() {
                    document.getElementById("nav").style.height = "0%";
                }

                function openFollow() {
                    document.getElementById("nav").style.height = "0%";
                    document.getElementById("follow").style.width = "100%";
                }

                function closeFollow() {
                    document.getElementById("follow").style.width = "0%";
                }

                function closeTours() {
                    document.getElementById("nav").style.height = "0%";
                    $('.open-popup-link').magnificPopup({
                      items: {
                          src: '#tours',
                          type: 'inline',
                          midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
                      }
                    });
                }

                $(document).ready(function() {
                var s = skrollr.init();
                }); 

                $('.open-popup-link').magnificPopup({
                    type:'inline',
                    midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
                });

    $('#tour').click(
        function (e) {
            $('html, body').animate({scrollTop: '2100px'}, 800);
        }
    );

            document.addEventListener('touchmove', function (e) { e.preventDefault(); }, true);

    </script>
Prinzhorn commented 7 years ago
//Before
window.scroll({
    top: 2180, 
    behavior: 'smooth' 
});

//After
skrollr.get().animateTo(2180);

https://github.com/Prinzhorn/skrollr#animatetotop-options

RByers commented 7 years ago

As for the warning from Chrome: sorry for the trouble, this is a breaking change in Chrome 56 to improve scroll performance. There's probably a missing touch-action CSS rule, which is necessary to support touch on IE/Edge anyway.