We Keep Coding

Scroll to center of horizontal div

I have following <div> on my page. Amount of black squares depends on user input. How can I scroll to horizontal center of this block using JS?

To center that, you need to use the scrollLeft property.
document.body.scrollLeft = (document.body.scrollWidth - document.body.clientWidth) / 2
Of course, for your problem, you need to get the reference of that div. Above code is a reference on how you scroll towards the center of a horizontal bar.

How to get the scrolled distance in pixels in a scrollable div

I am building a Angular 9 app.
In this app I got a scrollable div (overflow: auto).
I am looking for a way to check how many pixels the div has scrolled so I can use that distance to get an accurate distance for the scrollable element inside of it.
The code below only returns the distance from the side of the window but I need to add the pixels scrolled too to get accurate value.
ui.offset.left

You have to use the scrollTop or scrollLeft attribut:
element.scrollTop // The distance of the scroll

How to open website at specific point on page in HTML?

beginner programmer so apologies if this is really obvious!
How can i get my website to open at a specific point on the page (in HTML)?
I can't find what this is called anywhere! Not Anchor etc. The website will be wider and longer than most screens. I want the screen/viewport to open at the very centre of a 2500x2500 pixel background.
I am working in DreamWeaver CC on Mac OS X 10
Thanks in advance!!
p.s no code to post, this is my first port of call in putting this together

You can get the client's screen with $(window).width() & $(window).height() , it's jQuery code so you'll have to add a balise script to the jQuery lib on your web page. Can you tell me more about what you want to do ? I have trouble understanding. You don't want any anchor but you want ? Apoligies for not understanding.

Try this bit of Javascript to fire when the page loads
window.onload = function(){
window.scrollTo(1250, 1250);
}
The window.scrollTo(x-coord,y-coord) function takes two parameters, x-coord is the pixel along the horizontal axis of the document that you want displayed in the upper left and y-coord is the pixel along the vertical axis of the document that you want displayed in the upper left.
I picked 1250, because that's 2500 divided by 2, but you may have to tweak that a little if you want that spot in the middle of the screen. You will have to get the screen's viewport and do some math.
(hint: window.innerWidth & window.innerHeight gives you the dimensions including the scroll bar; document.documentElement.clientWidth and document.documentElement.clientHeight is without the scrollbar)
The documentation for window.scrollTo() is here: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo
Some info about the viewport dimensions can be found here: http://ryanve.com/lab/dimensions/

As bryguy said, you can calculate the center of your screen and use scrollTo(). Alternatively, if you have a particular element that you want to scroll to, give the element an id and use the scrollIntoView() function. You can also center an invisible div positioning the div absolutely and setting the top and left values to 50%:
HTML
<div id="scrollToMe" style="position: absolute; top: 50%; left: 50%;"></div>
JS
window.onload = function() {
document.getElementById('scrollToMe').scrollIntoView();
};

You can do this without jQuery. You can use the native JavaScript function window.scrollTo() to scroll to the center.
To calculate the center of the screen all you have to do is:
For vertical center
Determine the height of the viewport: The height of the viewport is stored at document.documentElement.clientHeight.
Determine the height of the entire document: You can use document.documentElement.offsetHeight or document.body.scrollHeight to get the height of the entire document.
Calculate: Now simply subtract the viewport height from the document height and divide it by two like this:
(document.documentElement.offsetHeight - document.documentElement.clientHeight)/2
For horizontal center
Determine the width of the viewport: The width of the viewport is stored at document.documentElement.clientWidth.
Determine the width of the entire document: You can use document.body.scrollWidth to accomplish this.
Calculate: Now simply subtract the viewport width from the document width and divide it by two like this:
(document.body.scrollWidth - document.documentElement.clientWidth)/2
Now time to scroll
Finally, you'll want to make the window scroll to the calculated point.
window.scrollTo(centerWidth, centerHeight);
If you want to do all of it in one step, you'd do:
window.scrollTo( (document.body.scrollWidth - document.documentElement.clientWidth)/2, (document.body.scrollHeight - document.documentElement.clientHeight)/2 );
Please note that we've used document.documentElement.clientHeight (and clientWidth) and they give you the viewport size without the scrollbars. If you wish to include the scrollbars you'll have to use other variables. You can find examples of how to get those measurements on the internet.
For more information: Center a one page horizontally scrolling site in browser (not centering a div)

Horizontal position movement on vertical scroll Stellar JS

I am having difficulty with my horizontal offset effect. I want to use only Stellar JS to horizontally shift an img on vertical scroll. As of now, I have a container element that's 1800px tall and an img inside whose height & width are dynamically set on load (based on viewport... ie it's height is the height of the viewport and the width is proportionally wider than the viewport).
When scrolling vertically from the top of the container to the bottom of the container, I want the img to slide left from it's left edge all the way to its right edge. Therefore, at the top of the container, the img will be aligned left and overflowing right, and then at the bottom of the container, the img will be aligned right and overflowing left.
Here is an example created by the Stellar JS creator that is close to what (but with some unwanted vertical scroll as well) --> link
Take a look at this template jsfiddle: http://jsfiddle.net/z6F3h/2/ It needs to have the effect implemented. I believe that I need to modify... setTop and setLeft properties

The creator of the stellar.js plugin gave a great foundation over here for making it move horizontally and vertically at the same time.
How to move/animate elements in from the side with Stellar.js on a vertical scroll?
If you're looking for the layer to only move horizontally and not up and down AT ALL, then I modified his code slightly to have the top stay the same.
http://jsfiddle.net/QGd9g/995/
The modifications I made were to have originalTop - newTop, instead of just setting top to be the new Top.
$(function(){
$.stellar.positionProperty.apple = {
setTop: function($el, newTop, originalTop) {
$el.css({
'top': originalTop - newTop,
'left': $el.hasClass('apple') ? originalTop - newTop : 0
});
}
};
$.stellar({
verticalOffset: 200,
horizontalScrolling: false,
positionProperty: 'apple'
});
});
What's tricky about what I did (there might be a better solution), is that you setLeft, and the layer will move to the right.

Center scroll bar on lower resolutions

My website's width is 1200px, when someone with lower resolution looking site horizontal scroll is visible and scroll bar is located to the left.
Is there way to locate scroll to center using css, javascript or jquery?

You don't need jquery for that. that is a basic thing for javascript.
document.body.scrollLeft = (1200-window.innerWidth)/2

The best way is to use $(window).scrollLeft();
Just place the center value of the window into the scrollLeft function and the page will reposition itself. The easiest way to find the center of the page is to take your 1200 width and divide it by 2, then subtract the calculated $(window).width(); divided by 2.
var scrollPos = (1200/2) - ($(window).width()/2);