Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Another solution to hide scroll bars #59

Closed
ghost opened this issue Feb 9, 2016 · 1 comment
Closed

Another solution to hide scroll bars #59

ghost opened this issue Feb 9, 2016 · 1 comment

Comments

@ghost
Copy link

ghost commented Feb 9, 2016

To hide scroll bars current solution is
document.body.style.overflow = 'hidden';
But in this case in some browsers (firefox & chrome) the page content rebuilding to refill all window width.

I've been hid scroll bars with this code:

/* for html tag */
document.documentElement.style.overflowY = 'hidden'; 
/* for body tag */
document.body.style.overflowY = 'scroll';

in context:

function showOverlay(chosenImageIndex) {
    /*if(options.noScrollbars)
        document.body.style.overflow = 'hidden';*/
    if(overlay.style.display === 'block') {
        return;
    }
    bind(document, 'keydown', keyDownHandler);
    currentIndex = chosenImageIndex;
    loadImage(currentIndex, function() {
        preloadNext(currentIndex);
        preloadPrev(currentIndex);
    });     

    updateOffset();
    overlay.style.display = 'block';
    if(options.fullScreen)
        enterFullScreen();
    // Fade in overlay
    setTimeout(function() {
        overlay.className = 'visible';
        if(options.afterShow)
            options.afterShow();
        /*kir*/document.documentElement.style.overflowY = 'hidden';
        /*kir*/document.body.style.overflowY = 'scroll';
    }, 50);
    if(options.onChange)
        options.onChange(currentIndex, imagesElements.length);
}

function hideOverlay() {
    /*if(options.noScrollbars)
        document.body.style.overflow = 'auto';*/
    if(overlay.style.display === 'none') {
        return;
    }

    unbind(document, 'keydown', keyDownHandler);
    // Fade out and hide the overlay
    overlay.className = '';
    setTimeout(function() {
        overlay.style.display = 'none';
        exitFullscreen();
        /*kir*/document.documentElement.style.overflowY = 'auto';
        /*kir*/document.body.style.overflowY = 'auto';
        if(options.afterHide)
            options.afterHide();
    }, 500);
}

Live demo on http://kirillaristov.com/en/my-routes/as-the-first-settlers/photos/fav (any clickable image)

This is my first experience in github, sorry if something is wrong.

(Marek, thank you for your project! This is very cool lightbox!)

@ghost ghost changed the title Another solutions to hide scrollbars Another solution to hide scrollbars Feb 9, 2016
@ghost ghost changed the title Another solution to hide scrollbars Another solution to hide scroll bars Feb 9, 2016
@feimosi
Copy link
Owner

feimosi commented Feb 26, 2016

Thanks for your suggestion! Have you tested that on other browsers?
Does it really affect performance?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant