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
Related
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.
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
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!