I have a roadmap component where bars are arranged by time in horizontal axis (and by anything depending on filters for vertical axis)
I am trying to scroll to an HTMLElement using scrollIntoView. The scrolling involves both vertical and horizontal scrolling.
I am using scrollIntoView method.
roadmapItemEl.scrollIntoView({ block: 'center', inline: 'center', behavior: 'auto' });
It generally works as expected. However, when it autoscrolls to a bar in the right side of the current activeElement, the whole page shifts to the left, exposing white space. This happens only in Chrome.
(Note: I tried all combinations of the scrollIntoView options. Nothing changed)
Normal:
After autoscroll to a bar on the right:
(Note: This only gets fixed if I autoscroll to a bar on the left)
I unfortunately cannot share much code, thus I don't expect complete hand-holding here. However, I just need to know what to look for. Here are my questions:
What is this white space part of exactly? (body?) Can it be rid of?
In what situations does this generally occur?
Are there alternatives to scrollIntoView that could be more suitable for such autoscrolling (more fine-tuned for horizontal scroll perhaps?)?
Probable reason why only Chrome is affected.
Related
I found a carousel (https://codepen.io/paulnoble/pen/yVyQxv) that has some awesome transitions and thought it'd be nice to integrate into a project I'm working on: https://joshrodg.com/halloffame/
My code is here: https://codepen.io/joshrodgers/pen/MWBPXBx
The responsiveness of the design needed to be adjusted slightly because to me having the content split (left, right) doesn't quite work that well on smaller screens (like phones) - it'd make it almost impossible to read. So, my idea was just to remove the right-side content all together.
I have that working and it looks exactly as I expect, except one thing...
Basically, there is vertical paging on the right-side of the slideshow. When you click on the next circle it rotates forward to the next slide, when you click on the previous circle, it rotates backwards to the previous slide. On a desktop screen (larger than 900px) the paging area stays on top of the rotating images, which makes the slideshow rotation look really nice. On my iPhone, and I'm guessing on other small screens, the rotating images appear to rotate on top of the paging area and then it re-appears.
I'm sure this is a simple tweak, but is there a way to keep the paging area on top while rotating through the images on a desktop and smaller screen like an iPhone?
This is also an issue on the original carousel, so I'm not sure how to fix it.
The paging area does have a z-index: 1 but for some reason the images still rotate on top of the paging area. I even tried setting it higher: z-index: 1000, but that didn't seem to do anything.
Anyone have any ideas?
Thanks
Josh
After looking into this a little more, I was able to find a solution!
My carousel__control div is what was controlling the vertical pagination, this was in carousel container and rightfully so, as it was controlling the position of everything inside. However, this also caused the issues I described, not really sure why.
All I did to fix this was move carousel__control out of the carousel container - basically right above it in the document. Then had to set my margins to match and adjust it's position. I couldn't keep the margin: auto and top: 0. Once I adjusted those two properties, everything started working as expected.
I have updated the pen here: https://codepen.io/joshrodgers/pen/MWBPXBx
Thanks,
Josh
Hi everyone,
I'm working on a side navigation menu for my churches website. You can see the demo here:
http://amightywind.com/sideNav/
However I have a problem. The navigation is supposed to work so when you scroll down the page past it's bottom the css changes to make it anchor and stop moving.
The problem is that the "anchoring" effect doesn't always work smoothly and will only be applied after you scrolled a few pixels past the bottom.
This causes the side bar to "jump" back into it's designed place.
I know this problem is probably caused by asynchronous panning (the browser delays repainting when scrolling to keep a smooth frame rate).
I was going to call this unsolvable, but then I saw firefox's quantum browser page.
If you scroll down halfway, you will see a large pink box on the left that says "Firefox Quantum features".
The text changes positioning when you scroll into it similarly to how my side bar works. However 2 things are different.
1 there is no jump. It is perfectly smooth in every browser I tested.
I figured this could easily be because they are moving a smaller portion of content than I am, but....
2 when I inspect element I notice there is no css class/style change on the object when scrolled into it.
How is this possible? Is there a way to make this effect work without Javascript? Or at least more smoothly than I've done just listening to the window scroll event?
Any help would be much appreciated thank you!
Vis.js has a great, customiziable timeline. It's easy to use but the docs and some of the naming of the variables and options are a bit ... opaque. In particular I am looking at the horizontalScroll option.
Here is an example. It is completely unclear to me what the horizontalScroll option is supposed to do. There is no horizontal scrollbar there (in Chrome on OSX). In my test project, if I set it to true or to false it makes no difference: the timeline can always be dragged horizontally and no scrollbar appears when it is set to true.
I'm asking because I need a horizontal scrollbar in a timeline which has defined min and max dates. This earlier question from last year didn't get any answers (Horizontal scrollbar for visjs timeline). Maybe someone knows a bit more now, or can tell me what I should be seeing with the horizontalScroll option?
Refer to this line of the vis.js source.
If horizontalScroll is true, using the mouse wheel will scroll left and right on your timeline.
I've been trying to do something like this for quite a bit, and have tried a variety of methods from fake scroll bars and DOM-tricking code. Nothing seems to quite be as clean / functioning as I need it to be.
What I'm trying to do is have a horizontally scrolling div (with scrollbar), with a vertically scrolling div nested within it. Ideally the single horizontal scrollbar would scroll, and after a certain point--vertically scroll the "go-up" div next to it.
Here's an example diagram for those who need to visualize:
I think I have a solution that could work:
Basically I'm thinking that the horizontal "scene" could have overflow that equals the height of the "go-up" div. And after the horizontal width of the "scene" passes...you can, onScroll, shift the "go-up" container right using (ScrollLeft) and up using (ScrollTop).
Basically giving you the illusion of controlling it's vertical scroll with a horizontal scrollbar.
Check out the code here: http://jsfiddle.net/jPzqj/1/
I know how to pass a function at the end of the "scene"...currently I'm using:
$('#main').scroll(function(e)
{
if($(this).scrollLeft()>1430)
{
}
});
My only issue is I'm not quite sure how to approach the math that would allow me to shift the go-up container. How do I pass in the "scene" divs scroll value into the ScrollLeft and ScrollTop values of "go-up"...
Could anyone give me any advice on this at all?
Thanks.
You are totally off the right path, no vertical scrollbars are involved.
That is a good site (not the one that you make in 30 minute obviously), and the javascript is obfuscated, but if you are interested, you could watch the source with Firebug to understand what's going on.
It works by mixing a javascript library, some cool CSS3 Transform3D effects, and a nicely studied HTML to give you the effect of the screen scrolling up (actually, only the images are moving - and not scrolling - while the screen is always in the same Y position).
The same effect is used to create the percetion of depth, by moving the houses in background slower than the ones in front.
This effect is called PARALLAX SCROLLING .
A good javascript library you could start looking at for Parallax effects is Stellar.js
You can take a look at some great sites made with Stellar.js, especially Nike and Saucony.
Hope this answer saved you some time,
good luck on your studies ;)
EDIT
this is what you want: Jquery Parallax Scrolling effect - Multi directional
open the fiddle from the bounty-awarded answer and keep the right arrow key down.
I need what this...
$('#gatewayDimmer').width($('html').width());
$('#gatewayDimmer').height($('html').height());
$('#gatewayDimmer').css('display','block');
...is controlling to occupy the full screen/scrollable window. In FireFox, it does except for maybe...11px thats initially under the vertical scrollbar(when you use the horizontal scrollbar and scroll right, you can see the area under the vertical scrollbar was never occupied). In IE(7 at least), it occupies everything in the initial window, even the area underneath the vertical & horizontal scrollbars, but after scrolling down past the area the horizontal scrollbar would've covered, it doesn't occupy anything(it stops). I need every inch, pixel, etc. covered, from head to toe. To lock it, if you will. Is there something I can add, change here? Thanks in advance
The following seems to have worked:
$('#gatewayDimmer').css({display:'block', position:'fixed'});