I would like to prevent horizontal scrolling on my site using the multitouch trackpad on Macbooks, magical mouse etc. This issue is solved for Firefox (using solution from here: Prevent horizontal touch pad scrolling on macbooks using Firefox?). But it still gives me trouble on Chrome.
Is there any way of preventing this functionality on Chrome (e.g. using eventlistener)? Thanks
I had the same problem, and setting overflow to hidden in the CSS did not work too. My solution was using:
jQuery('html, body').css('overflow-x', 'hidden');
I dont know why, but in JavaScript it works.
In CSS, you can use overflow-x: hidden; to prevent scrolling. If you apply it to the body, or another element specifically that should do the trick.
Related
I’m seeing an issue where text only shows up after scrolling the HTML elements out of viewport or after switching to another tab and back. The same issue also happens in WKWebView. Is there a way to prevent this issue from happening? These sections can be scroll horizontally. Not sure if that’s related, but I find it very odd that Safari doesn’t render text that’s in the viewport.
In the attached image, you can see that there are blank rows under EU, UK and US.
Any suggestion is appreciative.
--
Added another image showing HTML elements. Element with .wrapper-row is the one that has overflow-x property. This works perfectly fine on desktop including when simulating to mobile responsive size, but has an issue even with Chrome on iOS.
I found a workaround. After playing around with debugger, I believe this has to do with iOS trying to optimize what content to load. The problem is that it's incorrectly optimizing and not loading content within the initial visible viewport. This is a similar issue where sometime I have to trigger a fake scroll so that content aligns properly in Safari on iOS especially with position fixed or absolute.
To make sure content shows up. I did the following:
$('.selector').css('visibility', 'hidden');
setTimeout(function(){
$('.selector').css('visibility', 'visible');
}, 10);
This must be done outside of the main thread execution or it doesn't work. That's why I'm putting a small timeout before executing it.
I found an article that mentioned that this has to do with
-webkit-overflow-scrolling: touch
and that a solution is to add
-webkit-transform: translateZ(0px)
but that didn't work for me. You can reference that thread here just in case my solution doesn't work for you and this one does.
iOS textarea text hidden when using -webkit-overflow-scrolling: touch
I have a few scrolling related issues on the website I'm working on: http://wvg.lexerim.com
Since I implemented the twitter ticker on top I could scroll to the right, to solve this I used the most upvoted solution in this thread: DISABLE the Horizontal Scroll (others didn't work).
This solution however results in the following two problems:
- Scrolling isn't fluid anymore (especially on mobile devices)
- The back-to-top button doesn't work anymore <- this isn't important, can simple disable it
Do you guys have any solutions for either the fluid scrolling or a cleaner solution for the horizontal scrolling problem?
Edit: additional information tryingI found out that the problem only exists in Safari and Chrome (and probably other webkit browsers) and not in firefox and that problem is caused by the overflow statements.
Edit 2: As this is apparently a Webkit (based) problem, two bug reports has been filled Safari/Webkit Chromium
I believe you're better off going this way in the CSS:
overflow-x: hidden;
overflow-y: scroll;
Also, perhaps webkit's overflow scrolling for touch may help?
Momentum Scrolling on iOS Overflow Elements
For what it's worth, just peeking at your site in Firefox, back-to-top is working for me. But yes, the scrolling with the scroll wheel is quite slow, and I don't see anything skimming through your code that should cause that.
I'm working with a webview this time. I've got a strange behaviour here.
The overflow-x is set to hidden, and works just fine on browsers. But when it comes to any mobile device, it doesn't respect the overflow at all.
http://www2.madeinweb.com.br/jobs/adc/prototype/html/
This is the URL of it. If you try to open the menu, it will work as intended. But I can scroll the content I placed left. That doesn't happen on browsers.
I know I can fully disable scrolling with jQuery, but I can't find a proper way to disable just horizontal scrolling.
Any tips over it?
I've managed to tweak it out with touchmove. thanks no one for the answer
I have the content of my website in an absolute positioned div that fills the whole screen. The scrolling on this div is normally clunky, as it's not the native momentum scrolling. Solution? Append -webkit-overflow-scrolling: touch; to the div.
Momentum scrolling works now, but when I scroll down the page, the div elements aren't showing up. The console shows no errors, nothing is wrong with the actual page, but the individual posts (the div's) don't show. Here's an example:
Can anyone confirm this on their iPad, or suggest a fix? I'd rather not use something along the lines of Scrollability. It might be that the iOS6 beta is causing this, but I'd like to be reassured.
You can view this site on your iPad
And if anyone wants me to explain my bookmarks, I will gladly do so.
Currently .post CSS class uses position: relative. If you remove that line, the issue goes away. Apparently relatively position elements are hidden when not within the view. Not exactly sure the why the iPad does this or if it is a bug. In my experience, iPad devices try to run as efficiently as possible. For example, if you scroll JS animations are frozen. Perhaps this is a technique to make iPads render pages more efficiently. Hopefully that helps.
This article maybe be related and have a work around: CSS3 property webkit-overflow-scrolling:touch ERROR
Using '-webkit-overflow-scrolling: touch' hides content while scrolling/dragging
Im using the jquery UI Dialog. (modal)
In Firefox and Chrome it looks fine. in IE8 scroll bars appear.
how can i remove them?
setting overflow:none on the dialog fixed it.
Because of small rendering differences, IE usually needs a little more space. Increase width/height a little bit and see, if the scrollbars disappear.