My current situation involves creating several panels that are stacked side by side within a main container. Each panel takes up 100% of the viewport width and height. I want to be able to horizontally scroll to each panel when clicking on their respective link. While this can be achieved with pure CSS, I am now delving into jQuery and would like to use the .scrollTo() method for this purpose.
Previously, when the panels were arranged vertically, I was able to easily obtain the top offset of each panel and scroll to their positions successfully.
However, with the horizontal layout, I am encountering difficulties in obtaining the left offset of the panels. The values I get for the left offset are all zero. In theory, considering a viewport width of 1920px, the left offset of the 2nd panel should be at 1920px, the 3rd at 3840px, and so forth.
After some research, I discovered that the issue may be due to the panels being outside the viewport. To test this theory, I adjusted the width of the panels to 20% so they would remain visible in the viewport, and then attempted to retrieve their left offsets, which proved successful.
To address this problem, I need to understand why this behavior occurs and how to resolve it. Although it may seem like reinventing the wheel, my goal is to learn jQuery thoroughly. Any assistance on this matter would be greatly appreciated :) Below are snippets of my progress thus far.
Thank you.
The Markup:
<div class="mainWrapper">
<section class="panel" id="panel-1"></section>
<section class="panel" id="panel-2"></section>
<section class="panel" id="panel-3"></section>
<section class="panel" id="panel-4"></section>
</div>
The CSS:
.mainWrapper, .panel {
position: relative;
height: 100%;
}
.mainWrapper {
top: 0;
left: 0;
}
.panel {
display: inline-block;
background: rgba(255, 255, 255, 1);
}
The Javascript:
$(document).ready(function() {
var $panelWrapper = $('.mainWrapper');
var $panels = $('.mainWrapper').find('.panel');
var $panelScrollPos = new Array();
$panels.each(function(i) {
//This is where I'm facing issues. It's not working as expected
$panelScrollPos[i] = Math.round($(this).offset().left - $panelWrapper.offset().left);
alert('Panels position are: ' + $panelScrollPos[i]);
});
});
Please note that I have used the .width() method to set the width of .mainWrapper and .panel elements. I haven't included it in the snippet as it is functioning correctly.