Forums

This topic contains 35 replies, has 10 voices, and was last updated by  willmcpo 11 months, 1 week ago.

Viewing 15 posts - 1 through 15 (of 36 total)
  • Author
    Posts
  • #207055

    rlnl
    Participant

    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

    #207063

    Shikkediel
    Participant

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

    var fixed = document.getElementById('fixed');
    
    fixed.addEventListener('touchmove', function(e) {
    
            e.preventDefault();
    
    }, false);
    
    #207065

    rlnl
    Participant

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

    #207071

    Shikkediel
    Participant

    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).

    #207072

    rlnl
    Participant

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

    #207073

    Shikkediel
    Participant

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

    #207075

    rlnl
    Participant

    The solution is works!

    #207076

    Shikkediel
    Participant

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

    :-)

    #207079

    rlnl
    Participant

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

    #207081

    Shikkediel
    Participant

    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. ;-)

    #207087

    rlnl
    Participant

    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.

    #207088

    Shikkediel
    Participant

    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.

    #207089

    rlnl
    Participant

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

    #207100

    Shikkediel
    Participant

    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.

    #207135

    Shikkediel
    Participant

    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-link icon-logo-star icon-search icon-star