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.
Related
So I've been running into this annoying problem and I don't seem to be able to fix it by myself. I'm currently working on an experimental App written Angular (11.2).
The page itself should be divided into several screen filling sections which users scroll through as if it were specific tiles. Therefor, scroll snapping is a must.
However I'm simply not capable of hiding the mobile browser address bar. This is due to the fact that, in order to get the snapping effect, the page only consists of one single element that is scaled fitting the current viewport. Also manually hiding the browser address bar using the widely used window.scrollTo(0,1) hack does not work since there is no real scrolling to be achieved.
Thus my question
Can I somehow hide the browsers address bar while still being able to keep the required layout required for scroll snapping?
You could use the app.manifest file to set your web-app to fullscreen. Dont know exactly if just works with installed pwas, bur you could give it a try.
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'm wondering if anyone knows a way that you can prevent browser zooming of specific page elements.
This is for the mobile version of a site I'm developing. I have a fixed menu bar that runs full width of the site and remains at the top of the page at all times to provide navigation. I've optimised the button/text sizes to work for touch screens and don't really want it to be affected if a user zooms the page content text.
The only thing I've come across is the following CSS, but this doesn't seem to work when I've tried it:
-webkit-text-size-adjust: none;
I'm do not wish to disable resizing of the whole page via the Viewport meta tag, I just want to target the menu bar html elements.
The zoom mechanism varies across browsers and is not standardized, nor is it scriptable. Any solution would be pretty convoluted in order to work across browsers. There is no easy way to do this.
I wrote a modal dialog based on a similar question, you can find it here.
In essence, the logic is about getting the page scale ratio based on window.innerWidth and maximum page width, applying it as a CSS transform to the element and then repositioning it on screen. If there is interest, I will rewrite it into a library that just takes a position: fixed element as an input and does all this magic to it when the user zooms the page.
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.
i was googling when i came across this.. the following image & never before or after that saw it...
this is a screen shot of google results in firefox
one result was scrollable with in itself...
see the scroll bar.. how can i achieve this scroll-bar...
we can have scrolling inside Divs but Firefox doesn't let CSS styling of scroll-bar & it screws the look & feel of the page...
jQuery UI can knock this out of the park. Check out their slider.
All of their widgets are ARIA-enabled and keyboard accessible, try using arrow keys and page-up/page-down on the example.
You can get this working on your website in 20 minutes. Less if you are already familiar with jQuery UI.
In webkit browsers, you can use the ::-webkit-scrollbar css selector
You will need to create your own scroll bar and div using JavaScript - currently, styling scrollbars only works in IE5.