Develop Reference

Calculate Scroll Position using vanilla javascript

The wrapper overflows on x direction so it has horizontal scrolling, and the table inside .body overflows on y direction so it has vertical scrolling. The Markup looks like below.
<div class="container">
<div class="wrapper">
<div class="head">
<table>...</table>
</div>
<div class="body">
<table>...</table>
</div>
</div>
</div>
I've removed the default browser scrollbars and created custom scrollbars. The custom scrollbars are created for the container element. When wrapper scrolls horizontally then container's x-scrollbar scrolls, and when table inside body scrolls vertically then container's y-scrollbar scrolls.
The problem is with the vertical scrollbar. When I click and drag and the vertical scrollbar's thumb, I've to update the scrollTop of the table inside body. I'm founding it hard to figure out the right calculations to update the scrollTop.? Someone help me fix this.
I've set up the mousedown, mousemove and mouseup listeners for the y-scrollbar's thumb to calculate the amount of distance dragged, but how do I calculate the scrollTop of the table inside body with respect to the amount of distance dragged in the y-scrollbar?

I figured out the correct calculations.
var elem = document.querySelector('.body table'); // Content to be scrolled.
var yTrack = document.querySelector('.track.y'); // scroll-track-y
var yBar = yTrack.querySelector('.bar'); // scroll-thumb-y
On mousedown event, I'm setting the intial values to an object.
On mousemove event, I'm updating the scrollTop of the element to be scrolled.
Then on mouseup event i'm setting that object to null.
function yBar_OnMouseDown(e)
{
initCoords = {
axis: 'y',
abs: e.pageY,
bar: yBar,
p0: yBar.offsetTop
};
};
function yBar_OnMouseMove(e)
{
if (initCoords && initCoords.axis === 'y')
{
var maxElemScroll = elem.scrollHeight - elem.clientHeight;
var room = yTrack.scrollHeight - yBar.clientHeight;
var diff = e.pageY - initCoords.abs;
var abs = initCoords.p0 + diff;
var maxTrackScroll = yTrack.offsetHeight - yBar.offsetHeight;
abs = abs < 0 ? 0 : maxTrackScroll < abs ? maxTrackScroll : abs;
elem.scrollTop = maxElemScroll * abs / room;
}
};
function yBar_OnMouseUp(e)
{
initCoords = null;
};

why doesn't my JS function fire on the onresize event?

function getCentralPosition() {
// This script verticaly centers the heading you see on the main home page video //
// First save the parent div that houses the heading element into a variable named parentDiv.
var parentDiv = document.getElementById('home-section-1');
// Now obtain the total height (including padding, borders etc) of this parentDiv
var parentDivHeight = parentDiv.offsetHeight;
// Save the child div element that houses the heading into a variable named childDiv
var childDiv = document.getElementById('home-first-overlay');
// Now obtain the total height (including padding, borders etc) of this childDiv
var childDivHeight = childDiv.offsetHeight;
// Calculate the height difference between the parentDiv and childDiv by subtracting their heights and storing them
// in a variable named heightDiff
var heightDiff = parentDivHeight - childDivHeight;
// Obtain the precise position required from the top of the parentDiv by dividing heightDiff by 2
var pos_from_top = heightDiff / 2;
// assign pos_from_top as the value for 'top' on childDiv using "px"
childDiv.style.top = pos_from_top + "px";
}
window.addEventListener("onresize", getCentralPosition);
without the window resize eventlistener, I used the code as is - but the idea is that it also stays in the center when one trys to resize the browser window etc. Thought not necessary, i just wanted to achieve this. Any ideas as to what I should be trying ?

I believe you are looking for the "resize" event
Here is the updated snippet (it errors without the proper HTML, but shows the event firing).
function getCentralPosition() {
// This script verticaly centers the heading you see on the main home page video //
// First save the parent div that houses the heading element into a variable named parentDiv.
var parentDiv = document.getElementById('home-section-1');
// Now obtain the total height (including padding, borders etc) of this parentDiv
var parentDivHeight = parentDiv.offsetHeight;
// Save the child div element that houses the heading into a variable named childDiv
var childDiv = document.getElementById('home-first-overlay');
// Now obtain the total height (including padding, borders etc) of this childDiv
var childDivHeight = childDiv.offsetHeight;
// Calculate the height difference between the parentDiv and childDiv by subtracting their heights and storing them
// in a variable named heightDiff
var heightDiff = parentDivHeight - childDivHeight;
// Obtain the precise position required from the top of the parentDiv by dividing heightDiff by 2
var pos_from_top = heightDiff / 2;
// assign pos_from_top as the value for 'top' on childDiv using "px"
childDiv.style.top = pos_from_top + "px";
}
window.addEventListener("resize", getCentralPosition);

I use a similar function to adjust a dynamic svg graph based screen size.
I just place the onresize="function()" code in the tag and it works out of the box.

Calculate offset top of elements inside of a scrollable div

How can I calculate offset top inside a scrollable div? I have two divs that I want scroll inside my content div, and I want to set 2 variables to true/false, depending on where they are positioned inside that content div.
I tried something like this but I guess it calculates the entire page offset, it doesn't really work. I bind scroll to that content div, and I want to calculate their positon:
angular.element(slideContent).bind("scroll", function () {
var contentScrollTop = angular.element(slideContent).scrollTop();
var slideOneOffset = slideOne.offset().top;
var slideTwoOffset = slideTwo.offset().top;
var firstSlideDistance = (contentScrollTop - slideOneOffset);
var secondSlideDistance = (contentScrollTop - slideTwoOffset);
});

I think this should get you most of the way there:
// Position of first element relative to container top
var scrollTop = $(".container .element").offset().top - $(".container").offset().top;
// Position of selected element relative to container top
var targetTop = $(".container > *").offset().top - $(".container").offset().top;
// The offset of a scrollable container
var scrollOffset = scrollTop - targetTop;
// Scroll untill target element is at the top of its container
$(".container").scrollTop(scrollOffset);
———————————
EDIT (May 31 2018)
I guess this is better:
var scrollOffset = $(".container .element")[0].offsetTop - $(".container")[0].offsetTop

Cleaning up a SerialScroll Resize Function

Greeting's
I'am still relatively new to JavaScript and Jquery and I know there has got to be a better method than the one I'am using.
I'am working on a serialScroll implementation. There is a master scrollTo that controls the left/right movement of a number of slides. Each slide contains it's own implementation of a vertical serialScroll. I have the resize on the scrollTo working great and the resize on the vertical works but I can't figure an elegant method for ensuring that on resize the current position remains centered, My current method works but is very inefficient.
$(function(){
var $up = $('#sec1_nav a.up').hide();//up button -- each slide needs it's own unique nav buttons
var $down = $('#sec1_nav a.down');//down button -- each slide needs it's own unique nav buttons
$('#screen1').serialScroll({
target:'#section1',
items:'.item',
prev:'#sec1_nav a.up',
next:'#sec1_nav a.down',
axis:'y',
duration:1000,
force:true,
cylce: false,
onBefore:function( e, elem, $pane, $items, pos ){
$up.add($down).show();
if( pos == 0 )$up.hide();
else if( pos == $items.length -1 )
$down.hide();
// Here's where it get ugly, I'am adding a unique class for each slide to the item's
$('.item').removeClass('pos1'); //Each slides need's it's own class i.e. slide1 = pos1, slide2 = pos2 etc.
$(elem).addClass('pos1');
}
});
$(window).bind("resize", function(){
resize1(); // Same goes for the resize function, each slide need's it's own function.
});
});
function resize1() {
height = $(window).height();
width = $(window).width();
mask_height = height * $('.item').length; // sets the new mask height
// Resize Height of the area
$('.sections').css({height: height, width : width});
$('.item').css({height: height, width : width});
$('#mask').css({height : mask_height, width : width});
$('.sections').scrollTo('.pos1', 0 ); // This issue is where it all fall apart, instead of using serialScroll, i'am stuck using scrollTo to maintain the current slide position.
}

how to re-calculate variables in javascript

function scrollContent(){
var div = $('#scrolling-content'),
ul = $('ul.image'),
// unordered list's left margin
ulPadding = 0;
//Get menu width
var divWidth = div.width();
//Remove scrollbars
div.css({overflow: 'hidden'});
//Find last image container
var lastLi = ul.find('li:last-child');
//When user move mouse over menu
div.mousemove(function(e){
//As images are loaded ul width increases,
//so we recalculate it each time
var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
div.scrollLeft(left);
});
}
This is how I scroll my image list. The problem is that #scrolling-content element's size is dynamic. It changes on window resize. Here;
$(window).resize(function() {
$("#scrolling-content").css("width",$(window).width() + "px");
$("#scrolling-content").css("height",($(window).height()-400) + "px");
});
So it has to recalculate the left value when user changes windows size. How sould I change script to do that? Recalling scrollContent() function with window.resize function is a noob solution I guess. And it creates conflict for IE.

You could set the width on resize and make your function call the variable like so. This method turns your function into a js object and the window update resets the width var inside that object. Course now you call the function like this: scrollContent.scroll();
var scrollContent = {
width: 0,
scroll:function(){
var div = $('#scrolling-content'),
ul = $('ul.image'),
// unordered list's left margin
ulPadding = 0;
//Get menu width
scrollContent.width = div.width();
//Remove scrollbars
div.css({overflow: 'hidden'});
//Find last image container
var lastLi = ul.find('li:last-child');
//When user move mouse over menu
div.mousemove(function(e){
//As images are loaded ul width increases,
//so we recalculate it each time
var left = (e.pageX - div.offset().left) * (ulWidth-scrollContent.width) / scrollContent.width;
div.scrollLeft(left);
});
}
};
$(window).resize(function() {
$("#scrolling-content").css("width",$(window).width() + "px");
$("#scrolling-content").css("height",($(window).height()-400) + "px");
scrollContent.width = $(window).width();
});
You can also just declare a standard js var and use that to keep things simple. I just prefer working with js objects to eliminate possible var interference.