Develop Reference

change scroll from vertical to horizontal automatically when section comes in view

I am want to create a react site where while scroll when I get to services section page should change from vertical scroll to horizontal scroll for that section. Any idea how can I achieve this?

How to get scrollbar position with Javascript?
this might help you if you got scroll position and add a condition on scroll

You can use framer-motion: https://codesandbox.io/s/framer-motion-horizontal-scroll-by-scrolling-vertically-forked-473s1?file=/src/SmoothScroll.js
Framer-motion uses "ghost" div. Height of that div is equal to the slider length, you scroll it and framer create horizontal scrolling. It also check's when your slider is in a viewport.

How to keep position of scrollbar with JavaScript?

There are a lot of pdf pages that is wrapped by div in a page. When they were zoomed by increasing div's width and height, scrollbar lose its position.
How can I fix it like this example?
As you see in the example, when you zoom anywhere in the page, scrollbar didn't lose its position and it acts as a sticky.
What is your suggestion?

Javascript/CSS - Width shrink ratio defined by scroll height

I have a bit of a funny creative coding situation/a logo - where I have a div consisting of around 130 other colored divs and they together form the logo when at the top of the page, and as you scroll the page, the divs shift around and distort the logo, you can see it in action here:
https://warehouse.netlify.app/ and the div situation here: https://github.com/nejurgis/warehouse/blob/master/src/components/DivOverlay.js
as you scroll - the container div width shrinks and in that way it pushes all the children divs around
now the question is:
would anyone have an idea how to shrink the container div width according to the height of the whole page a.k.a. how to make the logo 'collapse' only at the end of the scroll and not mid-way as it is now?

Cool idea!
Consider using css grid https://css-tricks.com/snippets/css/complete-guide-grid/
using this you can specify the columns and rows of your grid and have all your divs automatically fill out each spot.

Owl Carousel overflow only right side

So, I got this going on right now:
I want it to overflow the right side like this
But I can't get it working because I have a container to keep it centered, if I remove it the left side goes all the way to the left, margin and padding doesn't work because I don't know how much I need to align it with the other divs. I tried position absolute and z-index but when I drag the carousel the first element on the left disappears.
Any ideas?
Edit: It should have white space on the left just when it starts, when I drag some item I want the carousel to be full width.

Just add a element right inside your container, within all the slide stuff. And add a total width to it (greater than the container). And add overflow: visible to the centered container.

Increase top and bottom margin FancyBox v2 because of fixed navigation

I'm currently working on a website which in future will be responsive. The site is primarily made up of images which in turn load into a FancyBox when clicked. v2 of FancyBox is now responsive and so re-sizes the images etc when screen size changes. As part of my design I have two fixed banners which appear at the top and bottom of the page, see image below:
By default there is a margin around the FancyBox so that it's styled nicely. However, with the fixed positioning that I've added to the banners I need to increase the top and bottom margin. I've looked through the JS source but I can't for the life of me find where I should be adding extra margin. There are all sorts of margins on the transitions etc (which I think is where I'm getting confused).
In theory I just need to add "x" amount of pixels to the margin, where x is the height of the banners. As an aside I'm not sure how I would replicate this in a responsive design, as the banners may be slightly shallower on a mobile. Adding the margin would mean there's a slight gap between the image and the banner, where currently the image goes behind the banner. See the following image for what I'd like it to look like:
I'd appreciate any thoughts/examples of where this has been done before.
Thanks in advance, Adam.

try the margin API option
$(".fancybox").fancybox({
margin: [120, 60, 20, 60] // top, right, bottom, left
});
See JSFIDDLE