I have a requirement to add a scroll bar that is always visible and which can be directly used by mouse or touch to scroll the contents of a large ListView.
The normal way of scrolling on mobile devices is by swiping up or down. During the scroll process there will be a small scrollbar visible but that scrollbar disappears and even while visible it can't be used to do any actual scrolling.
After much searching I could not find what I needed.
So my question is: Is there a way to make the scrollbar in the ListView fully usable or should I disable it and create a separate scrollbar which I will need to keep in sync. If so how?
For a functional example of something I would be working with see: https://fiddle.sencha.com/#fiddle/124j
Related
I know this question sounds confusing, so here's a better explanation:
I'm using a mobile. Say there's a scrollable element somewhere in the body. When I scroll the element and it reaches the bottom, I want instead of getting stuck for keep scrolling the element, it scrolls the page instead. That's also true if I reach the top of the element, it scrolls up the page, not getting stuck.
I tested it on two different mobile phones with the latest version of Chrome. The First one does exactly that. Weirdly enough, the second one only works when it gets to the top but not to the bottom. Is there any way to make it always work irrespective of the environment (mobile phone or browser) we are using?
Edit: What I'm trying to achieve with this
Desktop:
I want a way so that the buttons placed at the bottom of the content are not so distanced from the user's view. If we remove the scrollbar, then the users have to scroll all the way to the end of the content to be able to click the buttons.
The problem with this method is that, on mobile, in some browsers, it blocks the user from scrolling the page, even after reaching the end of the element. So they have to touch the edges of the screen to be able to scroll the page instead of the element.
What I want is, for users having difficulty touching the edges, they can still scroll the element. And when it reaches the bottom of the element, it scrolls the page.
I know this is weird. I know some of the better tricks like using the Read More-Read Less button, but it requires JavaScript I guess? I'm in a situation that's really hard to use JavaScript at the moment (shortly because of how bad the code is organized), and looking for a way if there's a simple trick using pure CSS. Any help or idea is appreciated!
My Problem:
My web page screen resolution is wider that the mobile screen resolution. I am trying it locally from assets to be shown on WebView.
The sections are arranged horizontally in a grid display.
Then when I see the same page on phone, the middle sections are
collapsed (not shown).
There horizontal and vertical scroll views is not visible, when it should.
and like it should be: the horizontally arranged sections should
arrange vertically to be able to show each section.
I tried to put the HorizontalScrollView and VerticalScrollView and the WebView inside.
I have fixed the resolution for the WebView as 1000dp * 600dp (layout_width and layout_height respectively in my layout xml).
Now I can scroll to all parts of the screen, but the clicks and drag drops are not working on the page (drag drop is managed from the JavaScript inside).
I tried using onInterceptTouchEvent to intercept some events, but I will say it is not recommended to use.
I want to manage the scrolls and clicks entirely from the Web Page rather than using Horizontal Scroll View and Scroll View and setting the heights and widths on the WebView.
Trying to take help from:
How to make a page responsive
How can I arrange horizontally ...
The link below solves my problem a bit. I can control when I want the above scroll bars to scroll when I need (or by adding a padding dimension inside this scroll-view parent to offer scroll area).
Prevent scroll of parent scroll view when drag event is happening in its child view, or in some other case where you do not want your scroll view parent to scroll.
There is another short way:
scrollView.requestDisallowInterceptTouchEvent(true);
But it offers less control. if you add a padding dimension inside this scroll-view parent to offer scroll area, it serves what I need.
So I have about 8 pages, more or less that I want the user to be able to scroll to each one horizontally. However each one of those 8 pages is also pretty long and needs a vertical scroll bar in each page as well. So when the user uses the horizontal scroll bar they should be able to navigate the different pages, but when using the vertical scroll bar they should be able to just scroll up and down on the page that they're viewing.
I looked at at fullpage.js and sly.js and I'm not really sure which one would be the best to achieve this kind of design. Also if anyone has any other suggestions on how to do this that'd be great too.
If you go for fullpage.js, it doesn't provide any horizontal scroll bar. You can scroll horizontally form one slide to another by using the keyboard arrows or by using any visual element in your site.
fullpage.js provides arrows by default to do so. But you can substitute them for any other element.
Then you can use the option scrollOverflow:true to allow the vertical scrolling within the slides.
In General:
I need my nav to behave like a mobile app (swipe effect), but WITHOUT accessing it via a mobile product. (So JQuery Mobile and such isn't applicable here... at least I don't think.)
Specifics:
My nav (example attached below) is a set of horizontally arranged icons. I would like to be able to scroll horizontally, but instead of simply scrolling the icons over, I'd like them to slide in increments (much like how an iPhone's pages slide into discrete positions with swipes across the screen.) This means regardless of how much the user scrolls, only the same amount of slide is performed.
View work-in-progress here
My Problem:
So I currently have this (crappy/buggy) version working, but it's based on JQuery's .mousemove() which means as I cause the menu to move, the cursor is still also moving and no longer over the icon I wish to click. If I based it on .scroll(), then the containing div would have to be scrollable (which would show the scrollbars).
So: Is there...
a) an example of this already done somewhere? or
b) a way to make a div scrollable but without showing the scrollbars
This site is being used in a specific way for a specific purpose, so please don't reply just to tell me that hidden scrollbars on a scrollable div is bad juju/annoying for the users.
I found something called "Web In Touch". Could this help?
Many MANY thanks in advance.
http://www.jacksasylum.eu/ContentFlow/
Have you tried content flow? It can do horizontal scrolling for you on button presses (and you can map this to something else). I understand this isn't what you want exactly, but it might work, since you want to horizontally flow/scroll image icons.
Ok, so I've created a little plugin that takes a bunch of elements and creates a sort of never ending list. I'll try to explain...
I have a div, and it's got about 20 elements tags in it. When the user scrolls up, the top element moves out of view and is moved to the bottom of the list. And vice-versa so that when the user scrolls down, the bottom element is moved to the top of the list.
This is specifically for Mobile Safari (iPad, iPhone) web content
What I would like to do is implement inertia so the scrolling slows to a halt in response to how fast or slow the user is scrolling when their finger leaves the screen. Just like the inertia commonly found in the iPhone / iPad UI.
The problem is, every time an element moves to the top or the bottom of the list, the scollTop value for the parent div is adjusted to make it look like all the elements are staying in the same place. Which means the scrollTop value is never more than the top elements total height. So there's no value I can think of that I can keep on manipulating to give the illusion of inertia.
I'm stumped. Does anyone have any suggestions?
iScroll implements scrolling with inertia, but I'm not sure how it would react to you adding and removing elements mid-scroll. Might be worth looking into though.