does anybody know how to stop track pads from scrolling horizontally?
My website has a deliberate overflow which you navigate using some javascript scrollbars.
http://www.mitchellop.com
However, if viewed on a mac using firefox the twofinger touch pad scroll allows you to move horizontally even though the x-overflow is hidden.
Any ideas?
thanks.
I ran into this issue myself with a project I'm working on. Firefox has some pretty strange events when it comes to certain kinds of scrolling. A little digging turned up the MozMousePixelScroll event. Here's the code I used to squelch the horizontal two-finger scrolling:
window.addEventListener('MozMousePixelScroll', function(evt){
if(evt.axis === evt.HORIZONTAL_AXIS){
evt.preventDefault();
}
}, false);
Instead, you could move the inside content by either positioning relatively, and changing the left value, or using CSS transforms (which don't require a repaint, and are hence quicker).
This may or may not require lots of rewriting, but it will work.
Related
While working on a web project, I suddenly noticed a random horizontal scroll pop-up near the banner area. I tried checking on the dev tools to see what was causing it but I couldn't find any lead. As you can see in image 1, the horizontal scroll pops up, but once you scroll down just a little bit. It starts to disappear (seen on image 2).
I hope someone can help me with this. This site needs to get deployed soon as it has a deadline.
While disabling the horizontal scroll is quite easy to implement, it is not recommended to use overflow-x: hidden;.
There is always a reason to why the site shows a horizontal scrollbar. I'd suggest finding out what exactly causes that behavior and rather fix it properly than trying to "hack" your way around it by disabling horizontal scrolling in itself.
You can simply add overflow-x:hidden using css but I must say it is not a good way of implementing it. There is a reason browsers has horizontal scroll.
So I suggest to find out the issue in your code, probably there should have a min-width or a fixed width in some element which cause to show a horizontal stroller in smaller device width.
So go to inspect elements and delete each of the wrappers one by one until you get the horizontal stroller disappear. This is the easiest way I follow to find the element which has the issue.
I have implemented a design for my website using scroll snapping via scroll-snap-align documented here and scroll-snap-type documented here.
The implementation works, however on Google Chrome the user must scroll quite "firmly" in order to move to the next section. On the other hand only one "tick" of the scroll wheel is required to move to the next section on Firefox. The behaviour on Firefox is much more desirable whereas the Chrome behaviour feels clunky and unnatural.
I'm wondering if there is a way to adjust the scroll sensitivity on Chrome or something along those lines in order to achieve the same behaviour that is present in Firefox.
I have created a JSFiddle with a minimal implementation that demonstrates the different behaviour across the aforementioned browsers.
Thanks in advance.
EDIT: The behaviour in the JSFiddle (and indeed on my website) has now changed to something different but equally unsatisfactory. Now scrolling down one "notch" on the mousewheel causes the scroll snap to go 2 sections down instead of 1, I have created a new JSFiddle with a 4th section to confirm that the scrolling goes down 2 sections and not straight to the final section. I have been unable to find a reference to the update or change in specification that caused this.
I ran into the same issue described above and so I turned to https://lucafalasco.github.io/scroll-snap/. I've personally tested it on Chrome and Firefox and it seems to work well - that is to say, scrolling with the mouse wheel does not skip sections. I'm not intending to support IE11 so this serves my purpose.
I have successfully implemented horizontal scrolling on wikiprop.org but the example I followed has this inertia/momentum effect, where you can swipe and it’ll continue scrolling and gradually slow down—as is common across the web.
Why doesn’t my horizontal scroll do the same? On my machine, at least, the scroll feels “sticky” meaning it doesn’t continue scrolling to a gradual stop when I do the “fast swipe” gesture.
Much appreciate any support, and please let me know if this is not clear enough.
I looked at your site in Chrome with the developer tools opened. If you look at the following screenshot, you'll see that Chrome is only rendering some of the CSS. It appears you wrote your styles using SCSS and an error occurred in the pre-processing step. Since browsers can't read SCSS, you can imagine all the possible issues that might arise.
I'm trying to position an element directly above a mobile keyboard. ie: position absolute/fixed to bottom of page, but pushed up by the keyboard (or pushed up equivalent height of the keyboard).
Usually this is the opposite behavior of what's desired, and there's to be a lot of people fighting to keep bottom elements in place. I feel like I remember fighting those same battle before...
But now that I want it to move, it's not. (of course!)
My focus is iOS Safari for now, but would prefer cross browser.
It seems older versions of iOS changed window.innerHeight when the keyboard opened, for better or worse. But that's no longer the case. Which may explain why I'm not seeing what I expected to see...
I've been playing around with variously positioned parent elements with no luck.
Is this even possible? Or is the keyboard now completely detached from the viewport?
It is not possible. The keyboard appears to be its own entity away, or as you said, detached from the viewport.
Although you can't fix the element to the keyboard exactly, might I suggest that you may be able to use JavaScript and add a class that raises the fixed element the same height as the keyboard.
The keyboard sizes can be found here:
What is the height of iPhone's onscreen keyboard?
It's possible with VisualViewport API now to listen for the viewport change and read it values. In practice, it's not sending events immediately so the experience might be laggy.
I'm building a website that using css columns for a very long 'about' section. The website also uses fullPage.js. Moving the horizontal scroll bar allows the viewer to being reading many columns of text. This works perfectly on desktop and is a good ux solution.
Problem is the horizontal scrollbar disappears on mobile. I am assuming this has to do with code in fullPage.js and some touchscreen conditional overriding it? Perhaps not though and it's some strange css problem?
You can view the site in development here:
http://mpaccione.com/GET800/index.html#About
Use the fullpage.js option normalScrollElements for the element with the horizontal scrollbar.
From the fullpage.js docs:
normalScrollElements: (default null) If you want to avoid the auto scroll when scrolling over some elements, this is the option you need to use. (useful for maps, scrolling divs etc.) It requires a string with the jQuery selectors for those elements. (For example: normalScrollElements: '#element1, .element2')
For example:
$('#demo').fullpage(){
normalScrollElements: '#aboutCol'
});
And... use the latest version 2.7.4.
The one you are using is quite old.