Click here to Skip to main content
15,867,756 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
I am using ad inserter sticky block feature for the ad in my website. When I apply overflow-x:hidden he sticky block is not behaving as expected

What I have tried:

And I using this css to disable horizontal scrolling on mobile devices.

CSS
@media only screen and (max-width: 768px) {
html, body{
  width:100%;
  overflow-x: hidden;
    }
}
Can anyone help me with it. How can i resolve it.
Posted
Updated 4-Jul-23 21:59pm
Comments
Member 15627495 24-Mar-23 4:19am    
look in the 'dev tools' console, if you have a warning about 'tracking cookies'.
sometimes when 'lock tracking cookies' is 'ON' , elements can not display as usual..

by your code, you are going 'global' with your settings, the html and body tags are the 'whole tags'.
all your html are in them, so the css settings apply for all elements of your page.

make it with another selectors, more reliable with the aim required.
Chris Copeland 24-Mar-23 6:42am    
What does "not behaving as expected" mean? You haven't provided any HTML code or the corresponding CSS, nor have you explained what's happening. Please use the Improve question button and add more details.

1 solution

Hidden overflow has always caused problems with sticky positioning:
[css3 positioning] support position:sticky inside an overflow:hidden|auto on general parents · Issue #865 · w3c/csswg-drafts · GitHub[^]

In particular, setting overflow-x:hidden on multiple ancestors of the sticky element seems to break it:
css - Position sticky not working with body{ overflow-x: hidden; } - Stack Overflow[^]

Try only setting this property on the body element, not the html element:
CSS
@media only screen and (max-width: 768px) {
html, body {
  width: 100dvw; /* https://developer.mozilla.org/en-US/docs/Web/CSS/length#relative_length_units_based_on_viewport */
}
body {
  overflow-x: hidden;
}
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900