Fullscreen body scroll issue

[schellenbergk]

trafficstars

When in fullscreen user can scroll the body when swiping up/down on the fullscreen overlay.

[schellenbergk]

Is there a way to extend fullscreen functionality to add a custom body class?

[desandro]

Thanks for reporting this issue. What device / browser are you testing with? This might be related to metafizzy/flickity#740

[schellenbergk]

Latest chrome on ios (iphone x). Also happens on latest safari ios.

[desandro]

Okay, I'll have to take a look.

[benjibee]

I'm coming across this issue now in my development. I have some slides that contain text and the user can scroll vertically to read this, or horizontally to navigate slides. Using the latest Safari and Firefox for iOS the background scrolls once the user hits the bottom of the slide.

[quangnhattran]

Hi @desandro You have any idea on how to resolve this matter? Thanks :)

[petercarsater]

I used a solution suggested at stackoverflow.

$carousel.on( 'fullscreenChange.flickity', function( event, isFullscreen ) {

    if (isFullscreen) {
        
        var _overlay = document.querySelector('.flickity-enabled.is-fullscreen');
        var _clientY = null; // remember Y position on touch start

        _overlay.addEventListener('touchstart', function (event) {
            if (event.targetTouches.length === 1) {
                // detect single touch
                _clientY = event.targetTouches[0].clientY;
            }
        }, false);

        _overlay.addEventListener('touchmove', function (event) {
            if (event.targetTouches.length === 1) {
                // detect single touch
                disableRubberBand(event);
            }
        }, false);

        function disableRubberBand(event) {
            var clientY = event.targetTouches[0].clientY - _clientY;

            if (_overlay.scrollTop === 0 && clientY > 0) {
                // element is at the top of its scroll
                event.preventDefault();
            }

            if (isOverlayTotallyScrolled() && clientY < 0) {
                //element is at the top of its scroll
                event.preventDefault();
            }
        }

        function isOverlayTotallyScrolled() {
            // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions
            return _overlay.scrollHeight - _overlay.scrollTop <= _overlay.clientHeight;
        }

        

    }
    
});