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!
Related
I have a scrollable container inside which I have an element that overflows and causes the scroll.
I want to zoom the whole div. Transform origin is set to 0 0 because I need to be able to scroll it and for some reason HTML doesn't allow that when it's 50% 50%.
Everything works correctly when the element is not scrolled down. However, when I scroll, the transform origin is still set to the top left point all the way up. Causing the scroll to go back to it resulting in a weird scroll that doesn't scroll where I want.
How can I work around this?
Codesandbox here:
https://codesandbox.io/s/vigilant-butterfly-i5klyx?file=/index.html
As you can see in the codesandbox, when scrolled completely to the top, it works correctly. Try scrolling to the second or third page and you'll see my problem
I created this scroll effect, where div is divided into left and right side - left side contains of images, that change based on scroll position and it's fixed and right side is scrolling content.
This is my idea:
https://codesandbox.io/s/scroll-effect-forked-ssi3x?file=/src/index.css
To describe the sandbox - you can see that my scroll effect works, but right div scrolls only when mouse is on that right div, what I need is that content of that right div will scroll down also when mouse is on left div
I tried to make the whole container's position fixed so it doesn't move, but it did not work. Is there a way how to achieve it?
Here is example of what I would like it to be like:
(starts with STEP 1)
https://honextmaterial.com/process/
To achieve your goal in React, you need a combination of some CSS and the JS scroll event. First, assign position: sticky to the element you need to be fixed when it's about to leave the viewport. Then, using a React ref, you access the scroll position of the scrollable div and use that logic to set your image source (you should avoid accessing the DOM directly with getElementById in React).
Here's a working codesandbox example
You could do this basically with only CSS. You could make the right (scrollable) side overlap the left side with position: absolute. Then the whole area is scrollable. After that you'd change the width of the inner element to 60% and you'd visually have the same output as before. I changed your codesandbox accordingly: https://codesandbox.io/s/scroll-effect-forked-55qsf
The only downside is, that the left side is not clickable, scrollable etc. anymore. If you want to keep HTML & CSS like before, you'd have to capture the scroll-event and run some JavaScript code.
I am building a Google Chrome extension and one of the features it does is generate a full page length screenshot by snapping a screenshot image of the viewport then scrolling down the page and repeating the process until it has an image of the whole page length and stitches them together as 1 image using HTML5 Canvas.
Page elements that are position: fixed get changed to position: absolute so that it doesn't show the fixed element in each viewport image in the final image repeated over and over!
Now I have a page for example that gives a new challenge.
https://docs.hhvm.com/hhvm/installation/linux#ubuntu-15.10-wily-werewolf
Based on the image below...
1) the top header bar is fixed so it changes to position: absolute
2) the main page right scrollbar scrolls the main right content panel down the page.
3) the left sidebar has a separate scrollbar for it's DIV.
When my extension makes a screenshot on this page, it ends up repeating the left sidebar contents over and over all the way down the page since the right scrollbar goes much furthor down the page.
I think the solution is to somehow detect and make the left sidebar in these cases be positioned so that it does not have a scrollbar and instead will show all the left sidebar content as the right content DIV is scrolled down.
I am just not sure about how to do that left sidebar part at the moment, any suggestions? I would need to detect this situation on other pages automatically as well!
CSS overflow is what you are looking for, I guess.
Try setting overflow: visible to that sidebar. Now the "auto" value is likely to stand there.
What about detecting... You can check the scrollHeight of the element and get its height, for instance sidebar.scrollHeight > sidebar.offsetHeight. If it's true, it means it is scrollable.
I'm having a little trouble getting my head around a Javascript animated scroll issue.
I'm using the SuperScrollorama Jquery plugin which is built on-top of the Greensock JS tweening library.
The fundamental effect I'm after is to "pin" a section down, then use vertical scrolling to expand some content, then "unpin" the section once the content is fully expanded, so the user can scroll on - i.e. http://blueribbondesign.com.au/example/
But when I try to apply this same effect to multiple sections one after the other, everything gets all broken: the "unpinned" content below the pinned element is pushed off screen and it seems to miscalculate the height of the element when it performs the animation in reverse (i.e. scrolling back up the page). - i.e. http://blueribbondesign.com.au/example2/
I've been endlessly fiddling with the "position:fixed" and "pin-spacer" div, and tried attaching the Superscrollorama plugin to various containing elements, but still cannot work out how to get it to work.
Any help from the brilliant crowd-sourced minds of the web would be much appreciated,
Cheers,
TN.
I've been working with this issue myself. What happens is there's a blank div spacer put above the section being pinned with a height that you've defined in the pin() function. Secondly, the pinned element gets a position:fixed assigned to it. Both of these things allow the scroll bar to continue down the page while the element stays affixed. In turn, whatever you had below that section gets bumped down because of that spacer div's height.
If your pinned element is centered horizontally, first give it a left:50%, margin-left:-{width/2}px to fix it from pushing to the left edge.
Next, you'll have to detect the pin/unpin events (which are offered by the plugin as parameters additional to "anim"), and change the section underneath to also toggle a fixed/relative position. When you change that underlying section to be at a fixed position, be sure to set its "top" property to whatever the pinned element's height is. Once the pinned element becomes unpinned, change it back to relative positioning. Does that make any sense?
It seems that different techniques will call for different fixes, but those things are what I'd pay attention to... fixed positioning, and then using the pin/unpin events for adjustment.
I'm building a touch-enabled html app and decided to use iScroll for scrolling within a div.
essentially, I've got two seperate scrolling divs but the scrollbars are always placed on the far outside of the page
http://jsfiddle.net/SRXMn/3/
the problem I'm having here is two-fold.
1) the scroll bars are both on the far right side (which doesn't make much sense for the left-scrolling content
2) the scroll bar extends all the way to the top of the header, when the only content being scrolled is below
when I set 'position:fixed' on the header, it shrinks down to a tiny size, and I can't seem to over-right that.
You could try using position:relative on div.scroll_hold