I want to do an independent scrolling between 3 columns on a Wordpress site, but I really don't know how can I do that, and what is the better langage to use (JS, CSS?).
I have two sidebar with content, you have to scroll to see the last content in the sidebars.
I have a container at the center with news and when you are at the bottom, you have an infinite loading.
What I want to do it's when user scroll on the page, the sidebars and the news content are scrolling, but, when there are no more contents in the sidebars, they become "fixed" and just the news container is scrolling.
Like this :
Can you help me please ?
All you'd simply have to do to create an independant scrollbar for each of these is to set an overflow: scroll; property on the right selectors however, the downside is that just setting overflow could potentially cause a horizontal scrollbar too.
There is an unstable yet broadly adopted alternative which is overflow-y - overflow-y works like overflow but only vertical.
So setting overflow-y: scroll; will allow at best a vertical scrollbar to appear.
Doing this with JS is not recommended as it will clog your scroll which CSS doesn't.
The reason JS clogs your scroll is because in JS you'll have to listen for a scroll event, when the user scrolls these are fired usually multiple times per second, and with 'multiple' I actually mean 10 to 100 times. So imagine executing even a little bit of code, if that code is bugged anywhere you can say goodbye to your users because they will have such slow scrolling.
The mechanism for having custom scrollbars on a page exists but it's not widely adopted either - just because of this reason. The concept was good but it was just detrimental to the end-user.
The downside for CSS scrollbars is that they will default to the browser scrollbar which will be different in every browser and unfortunately styling these is implemented differently across all of them and quirky at best.
NOTE
If your website is fullscreen and all three columns scroll independently the user will have to do 3 times the amount of scrolling before he or she sees ALL the content on the page, this might not be what you want. Also if you're stacking these constructions vertically on the same page you'll only be able to scroll down further once you've scrolled past the end of atleast one block of content.
This will agitate your users when they don't want to see the top content but just the bottom content for example.
IMO I wouldn't go for a solution like this if my website is full-width since it will annoy your users but then again, I do not know the entire context of what you're trying to achieve.
Good luck!
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!
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
The docs for Google Analytics: https://developers.google.com/analytics/devguides/collection/analyticsjs/#the_javascript_tracking_snippet
has a fantastic scroll effect, where the left sidebar is the fixed height of the page, then increases in size as you scroll down, then shrinks down as you get to the bottom.
you can also scroll this sidebar independently of the main content...
is there an existing solution (or even a collection of solutions I could chain together), perhaps via jquery plugins, to achieve something similar?
right now i've been able to achieve something similar to MSDN: https://msdn.microsoft.com/en-us/library/mt607689.aspx
by affixing the content on scroll (similar to bootstraps affix component) but the height of this container extends beyond the height of the browser so we have to scroll to the bottom to make the sidebar scroll.
the solution on the google analytics page is much more elegant because they scroll independently. any existing solution would be useful, and I'd like to know if there is one before I try to build it myself :)
Have you tried http://rocha.la/jQuery-slimScroll/?
They appears to work the same way as the reference page.
I am doing some VoiceOver experimentation with scrolling (the three-finger swipe up/down gesture).
My test page is at:
http://107.170.41.208/AccessibleHTML
There is a div with a scrollbar and lots of content (red background), and after that another div that is not scrollable with a lot of content (yellow background).
With the mouse I can scroll through the red background content, but using VoiceOver it skips that section.
How can I scroll through the red section content with VoiceOver?
A little late to the party but hopefully it's still useful to people.
Using position: absolute can sometimes cause some issues for screen readers as the DOM layout might not match the visual order. The VoiceOver can sometimes take the decision that it wouldn't make sense to read that first (or at all).
In that specific case you could just set the required height on the "red" <div> with overflow:scroll and it would be fine and should be readable and scroll-able.
As a more general rule, try and keep the visual order consistent with the DOM order, using float sparingly to change the layout slightly.
There obviously are rules somewhere dictating how and why this happens but they are tied up in Apple's code and very changeable between releases.
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.