I am going to get roasted for this but I've searched on StackOverflow and tried to implement the suggestions provided to no avail. Whenever I am using the menu on my website (on mobile devices) the main page still scrolls when I move my thumb and it causes glitches with the display. I cannot get it to lock in place when the menu is open.
Here's what I've tried
Position: relative (on body)
Height: 100% (on body)
Overflow: Hidden (applied to Body when you click to open menu)
None of those have worked. As you can see, the page still scrolls on mobile. Currently my live example shows this:
https://www.brotherhoodgaming.net
Any suggestions are welcome. I'd prefer a CSS solution to this rather than Javascript or Jquery (although Jquery toggleClass is fine as long as CSS is the baseline solution).
Related
I have one ul tag with max-height: 180px and overflow: auto styles.
This ul will have more li tags added dynamically (something like add li upon button click).
Issue: I can perfectly scroll list items if more li tags are added which doesn't fit in the max height of container. But, this is happening only in desktop. When I try same from my mobile chrome browser, it doesn't scroll.
Tried following, but no luck:
z-index, value is some 1000000 or above.
overflow: scroll, overflow-y: scroll, overflow: auto
overlapping by other elements, none
<body> tag had overflow: hidden, tried removing that, too
Question: What more should I debug? Couldn't find many solutions/documentations around this.
Sharing repro steps below, but, do not wish to get direct solution from your efforts. Only need some pointers to proceed.
Here is my test site with repro: https://interesting-my-store.myshopify.com/products/15mm-combo-wrench , open this page in mobile and click on red button with heart icon in it. A modal will pop up. Click "Create new collection" some 10 times and you will see that list won't scroll in mobile. But if you use desktop or use desktop debugger, it will scroll.
Found fix myself.
Issue was: Scroll was blocked with preventDefault() somewhere in my code.
Debugging: Found issue by adding "touchmove" event to my div container. Logged event data when I scrolled from my phone (via USB debugging on desktop). It showed me defaultPrevented: true. Thats where I realized preventDefault might be causing it. Looked for it in my code, and found that I had applied preventDefault on touchmove event at one place.
Removed that preventDefault and tried again and it worked.
Lesson learned:
If UI can be scrolled in desktop, it will be too in mobile unless blunder like above. No separate css or JS needed for scroll on mobiles.
If CSS is not giving away anything, go and look in JS too and don't ignore it thinking what JS has to do with touch screen.
I would like to find a solution for the following behaviour.
If you go to the next link example page and change to the mobile view in the developer tools, you could see that for some of the devices that you can choose the toolbar hide partially on scrolling down. Even the view creates a margin in the right side of the page that can be shown scrolling laterally.
I can not find who is causing the issue. I have checked the sizes of every single div in the page even for hidden div. I don't know if the issue is related with the property fixed in the css.
Here you can see what I mean, the toolbar is hidden when scroll down and if you scroll laterally some small margin appears.
Perhaps not a direct fix, but the Firefox inspector has a 3D mode that is actually very helpful in finding the offending elements in these cases.
You can solve it with the following edits:
.slick-prev: {left: 0;}
.slick-next: {right: 0;}
.container{padding: 0;} (inside of ".main-banner" one)
I'm working on a some-what basic site, but have an issue we can't seem to get passed. (site not complete)
It's a horizontal size, laid out using fullPage.js.
https://github.com/alvarotrigo/fullPage.js/
When you click the Sign up button in the top right corner, the slide container scrolls all the way left, displaying an iframe, loaded with a CRM.
We're using a callback in the fullPage plugin to know when a user has scrolled to that page. When the page with the iframe is loaded, a script runs to resize the height of the iframe to the available screen-estate ( win height - header & footer ).
Problem is, scrolling doesn't work on Iphone. Works fine on desktop.
Can't seem to figure out what's going on. Have read up on scrolling in iframes on iOS devices, but haven't stumbled upon a viable solution.
url: go-combine.com
Thank you in advance for your help.
My situation is extremely confusing, and I haven't the slightest clue what's going on. I made a Firefox add-on to redesign a website using jQuery and CSS. When I tried to migrate the addon to Chrome (that part was simple, because the features I am using in each SDK are very similar), everything worked except one of the main design elements:
I have a menu with position: fixed; aligned to the left of the page, and margin-left: 150px; on the main container element. The problem is that the margin is completely disappearing when I open it in Chrome. It works fine in Firefox.
So then I copied all of the HTML, CSS, and JavaScript into a jsFiddle, and the margin worked fine. Everything was completely identical, so I can't figure out why it would work in jsFiddle but not on the website.
Using left: 150px works, but then the page spills 150px to the right, and those dreaded horizontal scrollbars appear.
Links:
Extension File (CRX): https://docs.google.com/open?id=0B3k3BjZD2YfiTWNzTlhsa0t5STg
Demo Website: http://demo.flvs.net (Username: demo, Password: demo)
jsFiddle (Some images don't load, but the code is identical): http://jsfiddle.net/CjSXA/
I just removed the margin-left from #page_cont and added it to #content-cont.
That made the content stop hiding under the menu, though the footer is still partially covered by it.
What is this "Jerking" - On this page scroll right to the top, then if you're using a mac use two fingers and scroll up more... the page will scroll further up (page moves downwards) revealing a gray area and bounce back up after you lift your fingers off the touchpad.
Question is how do i prevent this "jerking" effect with CSS or JavaScript?
I know it's possible because if you go to facebook or pinterest and click on an image you get a lightbox. In that lightbox "mode" you won't get this "jerking" effect.
I initially thought it's something to do with lightboxes or css fixed positioning but even in http://lokeshdhakar.com/projects/lightbox2/ "mode" it still "jerks". How did fb and pinterest do it?
ps. use chrome or safari. firefox doesn't have this effect.
Facebook seems to accomplish this by setting the CSS attribute "overflow: hidden" on the document body when a picture is displayed. I just tested it myself by adding the following CSS to an HTML file and the bounceback scrolling was disabled.
<style type="text/css">
body {
overflow: hidden;
}
</style>
Of course, this will prevent your page from scrolling at all. I agree with Quentin, this is standard UI behavior and you shouldn't change it unless you have a good reason.