Forums

Give help. Get help.

  • # August 25, 2015 at 6:49 am

    Hi,

    On mobile devices when a position:fixed; element appears on the screen the user can scroll the <body>, through the fixed element.

    body,
    html{
        overflow: hidden;
        margin: 0;
        padding: 0;
    }
    
    #fixed {
        background: red;
        position: fixed;
        left:0;
        top: 0;
        width: 200px;
        height: 100%;
    }
    
    #content {
        background: blue;
        height: 3000px;
    }
    

    I tried to add overflow:hidden for <html> and <body> but it didn’t help. I would like to prevent scrolling through the fixed element, but I would like to allow the scroll, when the fixed element is visible, but the user scrolls on <body>.

    I tried this with ios and android devices. What is the best solution to solve this?

    I created an video to see what’s the exact problem: https://www.youtube.com/watch?v=9h_fjEDDwlc

    # August 25, 2015 at 7:53 am

    You’d need some JS for that – disabling default scrolling :

    var fixed = document.getElementById('fixed');
    
    fixed.addEventListener('touchmove', function(e) {
    
            e.preventDefault();
    
    }, false);
    
    # August 25, 2015 at 7:55 am

    Thank you. By the way is it the normal behaviour for ios?

    # August 25, 2015 at 8:34 am

    Indeed it is, any element that receives a touchmove inside body will trigger momentum scrolling as long as that element’s parent does not have any overflow itself.

    Made a minor adjustment by the way (forgot the var part).

    # August 25, 2015 at 8:35 am

    Thanks Shikkediel! I will use it. Btw overflow.. is it possible to use overflow:hidden for body?

    # August 25, 2015 at 8:38 am

    As far as I can tell, that will prevent page scrolling altogether…

    # August 25, 2015 at 8:46 am

    The solution is works!

    # August 25, 2015 at 8:54 am

    Excellent, I was just thinking if the event might still propagate (bubble up) to body but I’m glad the code was accurate.

    :-)

    # August 25, 2015 at 9:31 am

    Sorry, One more thing. Is it prevents the scrolling in the ‘fixed’ div too, because it’s in the body, right?:)

    # August 25, 2015 at 9:44 am

    Do you mean that the fixed element has overflow and a scrollbar as well? In that case I suspect scrolling the element will indeed not work when this code is used. Not because it is inside body but for the reason that all touchmove behaviour has been disabled.

    Then again, if it has overflow then swiping it will not bubble up and cause momentum page scrolling but ‘normal and local’ scrolling on the element. Then the bit of script wouldn’t be needed in the first place.

    Hope that’s not confusing… let me know if I should clarify more.
    Or in case I misunderstood, the other way around please. ;-)

    # August 25, 2015 at 10:23 am

    Yes, when the fixed element has too much content and the user needs to scroll it’s not possible because of this script. I realized that when I added it. :)

    When the fixed element has overflow, and the scrollbar is visible the problem doesn’t appear, but when the content is only few lines then the problem came up.

    I tried to find more examples but all of them forgot to handle this scrolling issue.

    # August 25, 2015 at 10:27 am

    Sounds like you need more JS – checking if the element has overflow. If not, use the aforementioned code.

    Are you using jQuery on your site? Making some examples would be a lot easier that way.

    # August 25, 2015 at 10:36 am

    Yes, I’m using jQuery. I’m going to play with it. :)

    # August 25, 2015 at 11:46 am

    Just a quick scribble for ya :

    $(function() {
    
        var fixed = document.getElementById('fixed'), overflow;
    
        $(window).on('load resize', function() {
    
        overflow = fixed.scrollHeight-$('#fixed').height();
        });
    
        fixed.on('touchmove', function() {
    
        if (overflow) return true;
        else return false;
        });
    });
    

    Small adaptation made – scrollHeight is a vanilla JS thing.

    # August 26, 2015 at 6:00 am

    By the way, if you’d like momentum scrolling inside the fixed element you could add this :

    #fixed {
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    }
    
Viewing 15 posts - 1 through 15 (of 36 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag