Hi community,
I’ve been working on a horizontal scroll project in which the whole page only scrolls horizontally. The client requires anchor links to the starts of each section and these section are of varying widths. I have tried a multitude of work arounds to get this working; the first being natively in Webflow but it does not like the fact I have varying section widths (some very long) and anchor links mess up the scroll and vice versa. I then found a GSAP solution, which worked to an extent. Using an HREF function in the code I’ve managed to get the menu links anchor to specific sections but this had caused other issues in that when I anchor to a section I can’t scroll back and if I begin to scroll and then anchor it takes me to half way through a section as opposed to the section start I set. Any advice on this would be greatly appreciated.
This is the custom code I used:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollToPlugin.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
const container = document.getElementById("sections");
$("#menu-links .sticky-menu_links").on("click", function (event) {
event.preventDefault();
var currentPos = document.querySelector("html").scrollLeft;
var id = $(this).attr('href');
var left = $(id)[0].offsetLeft;
var scrollDiff = left - currentPos;
console.log("current: " + currentPos, "left: " + left, "difference is: " + scrollDiff);/**/
window.scrollBy(0, scrollDiff);
});
/*document.querySelector("html").scrollLeft = left;*/
/*gsap.to("html", { scrollTo: left, duration: 1.5});*/
</script>
I can’t share the client project at this current stage.