Is there any way to control the speed or in other word, the viscosity of scrolling by the user in a scrollable element in a mobile browser?
I'm focusing on android browser.
No, scroll speed is controlled by the browser (and usually directly by the settings on the computer/device). I think your code wouldn't effect that.
In regards to a work around...
There are ways you could try to fake a different scroll speed by
moving your own content instead of the page, however, it's a bad
idea in terms of usability.
If the interest is that users have to scroll multiple times to get
to content further down the page, I would also suggest anchor points
with a smooth scroll option built into it. That way the control
to jump to that content faster is left to the user.
And lastly, if you're concerned about users leaving your content too
quickly and missing important information, it may be a better idea
to better style your content to visually catch their attention
before they begin scrolling away from it.
I hope this information helps you moving forward.
Related
My website sometimes bugs, making it impossible to scroll the page using the mouse wheel, touchpad or finger. Dragging the scrollbar, pressing space or pressing page-up/down does work.
Any suggestions on what it could be, or how one would go about fixing such a bug?
There dosn't seem to be any specific action or page connected to the bug, it only happens about once every other day, and has happened on several devices, OS-es and browsers (even iPads and Android, IE11 and firefox).
Even hard-refreshing the page, or browsing to another page on the same domain dosn't fix the bug.
I've tried disabling Javascript in my browser, clearing all site data, scrolling with the touchpad instead of mouse, have checked the "html" and "body" elements for CSS rules that might block scrolling and even removed all html from the page and replaced it with mockup html.
I know the question is vague, with no example code, and I can't give an URL.
If anyone can point me in a direction, or have any tips, please help.
I do face the same situation, and what I do in such situations is:
Press the mouse wheel.
Move the cursor up and down on the page, still holding the wheel, till the page scrolls.
Let go of the mouse wheel.
You will now be able to scroll using the mouse wheel.
P.S: I'll edit this answer after some time with pictures and more explainations, till then, this should work.
I am in the process of building a site with a large amoutn of divs, perhaps 300-1,000. Each are small, 100x100, and when the user clicks on each div a small modal pops up w/ basic info about each div, maybe 2-3 paragraphs and some images; all this works great. However, I fear as the divs increase in quantity, this amount of images/texts that are loaded will slow down the site to a crawl, resulting in a terrible ux; it's also aesthetically dispeasing to me (and I'm sure to other coders) to have so much code on a single page. So the question is thus: what is the best way to make modals that load quickly, but don't slow down the site, or are there alternatives to them?
I thought about imbedding the modal content (text,images) inside CSS, and perhaps makig it between 2-5 css files?
I thought about pop-ups, but those are problematic, as some browsers won't respond to the specific size dimensions of a pop-up, (IE), and some block pop-ups all together.
Has anyone else dealt w/ this or has an interesting solution?
I appreciate everyones help.
I have a navigation bar on the mobile version of a website and want it to be always as wide as the screen, i.e. when the user zooms in, the bar is supposed to not zoom in with the rest of the page.
Illustration of the problem:
Without zoom
With zoom
I know this is possible with JavaScript as described in this approach: https://stackoverflow.com/a/14466070/695457
But is there a way without JS? If not, are there any other libraries for this except detect-zoom?
There is no way without JavaScript. I suggest you leave it as it to be honest as those menu items look mighty small on the first screenshot if it was on a phone. You may be introducing an accessibility issue by disabling the functionality to let people with poorer eyesight view the menu text.
I´m using awesome Brad Frosts left nav flyout for my responsive design navigation. (http://codepen.io/bradfrost/pen/IEBrz).
I need some advice for the flyout. I need the flyout-area to be scrolled separately, not affecting the main content area — like the facebook app.
My experience so far is pretty bad when it comes to crossover support for fixed, scrollable areas (with complex elements inside) for smartphones combined with relative heights and meaures (the site is responsive). I´ve tried iScroll and jQuery mobile so far.
Would it be possible to accomplish scrolling the flyout ONLY without a huge amount of javascript-plugins, client-sniffing and CSS vendor-specific hacks?
My client really likes the flyout pattern. Performance, crossdevice support and non-hacky code is a "must have". Native look and feel is a "could have". I have no problem recommend another way to solve the navigation, I just need to be sure of my decision. Of course everything can be done — but to what cost?
Do you have any recommendations or advice before I cut the rope :) ?
The preview you've put up is looking really promising!
What I would suggest is that you use a little JavaScript to detect the window height. You can then set the height of the fly-out panel to the same height as the page and use display: block; overflow: auto. (It's possible that it already has block-display set).
This will force the panel to scroll within itself rather than flow further.
A few things worth bearing in mind:
You'll need to recalculate the height on window change or orientation change;
Touch-screen devices tend not to display scroll bars, this is a double-edged sword because it means you get a really nice app-like feel when you swipe up/down. However, it also means that users may need a little more of a visual hint that there's something to scroll for!
I'm working on a new web site that currently is configured as a full height (that is, 100% available browser window) application. In terms of layout, it is something like this - http://stevesanderson.github.com/fixed-height-layouts-demo/pane-transitions-tablet.html.
Our web site does nothing with the actual browser window size, like switch browser into full screen mode. It only uses the available space.
Operationally, this is going to be a semi-internal data entry application. Almost all pages are data entry forms or summary pages
Personally, I think makes a very nice looking app. However, some of the other developers are comparing this design with content in scrollable tags to be the same as iFrames. And as such should be avoided.
Is there any background / best practices information about designing a web site this way?
I personally love sites that choose to do this; I think that it's a great way to use up the available real-estate that you have. My one piece of advice would be to add a min-width and a min-height to your page so that you don't have to worry about your site breaking if the browser gets too small. This will not only improve the overall user experience, but will also prevent future headaches when trying to get your design to work in obscure dimensions.
It looks fine, and at first looks more like a 'real' app. The only weirdness with this sort of thing is that on OSX you get a bit of a bouncy effect when you hit the top and bottom because of the rubberbanding on the scroll. If you aren't sure what I mean, grab an iPhone/iPad/Mac and scroll up and down past the top or bottom of the content.
In reality it shouldn't be too hard to enable or disable this feature, so why not start with it, then revaluate once you have gotten going.
There aren't any good practices or background information that I know of on this subject. Just follow the normal rules of thumb, if it looks good, is light and loads well, and it is usable, why not?