- This topic is empty.
-
AuthorPosts
-
August 25, 2015 at 6:49 am #207055
rlnl
ParticipantHi,
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 #207063Shikkediel
ParticipantYou’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 #207065rlnl
ParticipantThank you. By the way is it the normal behaviour for ios?
August 25, 2015 at 8:34 am #207071Shikkediel
ParticipantIndeed 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 #207072rlnl
ParticipantThanks Shikkediel! I will use it. Btw overflow.. is it possible to use overflow:hidden for body?
August 25, 2015 at 8:38 am #207073Shikkediel
ParticipantAs far as I can tell, that will prevent page scrolling altogether…
August 25, 2015 at 8:46 am #207075rlnl
ParticipantThe solution is works!
August 25, 2015 at 8:54 am #207076Shikkediel
ParticipantExcellent, 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 #207079rlnl
ParticipantSorry, 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 #207081Shikkediel
ParticipantDo 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 alltouchmove
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 #207087rlnl
ParticipantYes, 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 #207088Shikkediel
ParticipantSounds 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 #207089rlnl
ParticipantYes, I’m using jQuery. I’m going to play with it. :)
August 25, 2015 at 11:46 am #207100Shikkediel
ParticipantJust 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 #207135Shikkediel
ParticipantBy the way, if you’d like momentum scrolling inside the fixed element you could add this :
#fixed { overflow: scroll; -webkit-overflow-scrolling: touch; }
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.