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.
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.
$(window).scroll(function(){
// scroll 100vh down on first scroll
// scroll another 100vh down on second scroll
})
I've seen a plugin that does just this but I want to be able to understand how the logic works. Can someone please explain it to me or at least point me to a site where it can be explained further?
$(window).scroll(function(){ //Function called when window is scrolled.
})
JQuery Scroll
The scroll event is sent to an element when the user scrolls to a
different place in the element. It applies to window objects, but also
to scrollable frames and elements with the overflow CSS property set
to scroll (or auto when the element's explicit height or width is less
than the height or width of its contents).
When the width/height of a div is more than the available width/height of the device browser will provide you a scroll bar to scroll down and see overflowed elements.
Jquery scroll allows you to listen to a event when a user scrolls inside the selector provided.
It will call your handler (function) that you passed as a parameter to the scroll function of jquery.
Further, you don't need to scroll an container manually. The browser will automatically scroll the contents of the overflowed container but you may want to increase the step of scroll by the scrollbar.
How do you increase the step?
Normally, when you scroll the scrollTop property of your scrollable container changes with a fixed step (1-10px).
This scrollTop property decides how much of content is overflowed from the top of the srollable container and shows more pixels from the bottom of the container its like a viewport.
So, you can add more number of pixel to scrollTop and scroll more than default.
Checkout this answer of mine
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 :)
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
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.