Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

  • This topic is empty.
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)
  • The forum ‘CSS’ is closed to new topics and replies.