Ok, so here's what I have: http://jsfiddle.net/E2U3j/
And as it's a pretty large div, I'd like to have a fixed horizontal scroll bar on the top of the window when I'm scrolling into that div, but if I'm not completely into the div (e.g If the div is only visible a half,I mean if it doesn't fill the whole height of the window), the horizontal scroll bar should be in the top of the div... How would you solve this?
Thanks :)
Try jQuery Scrollbar with external scrollbar (available on advaced scrollbars demo page) - scrollbar can be placed in any part of your page, you can hide/show it, make it fixed, etc...
The one thing you need is to handle window scroll and check current scroll position, compare it to your container offset and if it's greater - make scrollbar fixed, if not - change position to absolute (in case when scrollbar is inside of your container).
this code should solve your problem<div id="topnav" style="position:fixed; max-height:x; overflow-y:scroll;"></div> then the contents of your top nav is scrollable within itself and is fixed on the top of your page
Related
I have a div that is taller than the window but is contained within a certain width. This causes the div to get a horizontal scrollbar at the very bottom. The problem with this is it makes it hard for users to scroll left and right within the div.
I would like to know if it is possible to attach a scrollbar to the bottom of the screen until the user scrolls down to the bottom of the div.
To give you an idea of what I would like to accomplish. Codrops created a nice table that once you scroll past the table header it attaches its self to the top of the screen. Here is the demo of that http://tympanus.net/Tutorials/StickyTableHeaders/. I want to do this but with a scrollbar attaching to the bottom of the screen. I am sorry I can't provide things I have tried, because I don't even know where to start when trying to accomplish this.
You can create empty container with the same width as your div and set it to fixed position. Then sync scrolling position of these 2 DIVs using jQuery. Example on jsFiddle.
jQuery(function($){
$('.content').on('scroll', function(){
$('.scroller').scrollLeft($(this).scrollLeft());
});
$('.scroller').on('scroll', function(){
$('.content').scrollLeft($(this).scrollLeft());
});
});
Hiding/showing external scrollbar depending on page scroll offset is left for you as homework :)
I need to disable ANY kind of vertical scrolling within an overflown DIV (I would still be able to scroll it horizontally).
overflow:hidden with CSS won't work since you can still scroll with the mouse wheel click / smartphone touch scroll. The only thing this does is hide the scroll bar, not disable it.
Is there any way to do this with Javascript or jQuery?
Thanks in advance.
Have you tried reducing the height of the div so there is no where to scroll.
You could put the screen height into a variable (or slightly less) and then make the div the same height therefore cutting off any content with the overflow hidden.
I've a tricky problem. So I have two fixed element with space in between under those two elements I have a relative positioned element, everything is ok so far. Now when I scroll the relative positioned element will scroll and appear in between the two fixed elements and on top of the first one, here is the jsfiddle to make it clearer. I'd like the relative positioned content not to appear when scroll, like if it was a box scrolling with an overflow hidden.
The goal is to do a kind of box scrolling but with a window scrolling.
I'd like a css solution but I'm also opened to any js solution.
What about this?
http://jsbin.com/uSEfUMA/2/edit
fixed has a background
you can also add padding to body if you don't want to set a background to fixed
Could make a zindexed div with a background set to the same color as the page bg, put that over the relative positioned div and under the absolutes so when the relative div scrolls to that point of the page it appears to dissapear how I believe you want it to, or just use overflow hidden and absolute positioning to lock it into place and clip the content.
How can I bind the page's scroll bar to a particular div instead of the entire page. See Google Plus for an example of this functionality.!
http://i.stack.imgur.com/Ab82L.png
You can use position fixed panels down the left and across the top. The body will still scroll as normal, but the panels on the sides will make it look like only part of the page is scrolling.
If you don't want to mess with the browser's native scrollbar, you could always
Create a container
Set the height and width of the container to 100%
Set overflow to scroll (or auto)
That way you created your own viewport and have more control.
I have 2 columns of content, the left content has some fixed content at the top with some text at the bottom, the right column is a big long list of text & small images. Currently when I vertically scroll the browser the content below the fixed content on the left scrolls with the content on the right.
What I want is, if the content on the left fits within the browse window, not to scroll, if it does have enough content, scroll with the right column, but stop before all the content hides behind the fixed content, but without stopping the right column from scrolling.
Not sure if this is even possible, can't recall having seen it done before.
Thanks,
Chuck
something like this?: http://jsfiddle.net/S3xda/
things to be careful of:
only tested in the latest FF and chrome
not tested with contents of different length
in that example, i'm using a fixed height wrapper, as i needed to attach the scroll() event to it but you could use window on your own page.
ZenMaster has the right idea. The other part of this I would do "overflow-y: auto" on the fixed div, this will make it have its own scroll bar if the content you have in it is higher than the browser window.
What else you can do is just absolutely position the stuff at the top, to top, left and then position the stuff at the bottom for bottom, left - And dont do anything more than a total of 500px high in that box and the content should never need to be scrolled, the bottom stuff will always be at the bottom of the window and likewise the top stuff will always be at the top, while your user can scroll the big section up and down with the other side staying constant and static on screen...
Well zenmaster removed his answer for some reason, I thought it was pretty good.
anyhow, you want the one column to either be position: fixed or you could do it with absolute positioning. Set the height to 100% (body must also be 100% and any other containers, you need the 100% height to bubble all the way to the "window" and not some container in between. Also if you do position absolute, remember that the container of the absolute element needs to be relative if you are giving positioning coordinates to the absolute element.
I would prefer a plugin like THIS in that way you get a scroll bar for each and not scrolling on both. GL & HF
And btw this works in all browsers ie7-9 ff,chrome,safari,opera and so on (even works on mobiles)
I had a same problem as you and finally I have found this jQuery plugin http://dhlavaty.github.io/jQuery-SmartColumnScroller/ . It has nice demo which shows exactly the solution. It moves all columns on scroll. However when a column content ends the column stops while other still go. TADA!