I have this code to perform vertical+horizontal scroll. When I run this code alone as a HTML file, it works perfect. But If I add this code inside a wordpress page, the output looks weird. Below are the ways in which I've tried to insert the code into the wordpress page.
- Added the code inside custom HTML block in Gutenberg Editor.
- Used Raw HTML and Raw JS blocks in WP Bakery Editor.
- Tried in a simple Text block.
- Used a plugin called WP Coder. Unfortunately, nothing worked for me.
Here is my code
var windowWidth = window.innerWidth;
var horLength = document.querySelector(".elementt-wrapper").scrollWidth;
var distFromTop = document.querySelector(".horizontall-section").offsetTop;
var scrollDistance = distFromTop + horLength - windowWidth;
document.querySelector(".horizontall-section").style.height = horLength + "px";
window.onscroll = function() {
var scrollTop = window.pageYOffset;
if (scrollTop >= distFromTop && scrollTop <= scrollDistance) {
document.querySelector(".elementt-wrapper").style.transform = "translateX(-" + (scrollTop - distFromTop) + "px)";
}
}.horizontall-section {
padding: 100px 0;
background-color: pink;
}
.stickyy-wrapper {
position: sticky;
top: 100px;
width: 100%;
overflow: hidden;
}
.elementt-wrapper {
position: relative;
display: flex;
}
.elementt {
width: 500px;
height: 400px;
background-color: purple;
margin: 0 20px 0 0;
flex-shrink: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="cont">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="horizontall-section">
<div class="stickyy-wrapper">
<div class="elementt-wrapper">
<div class="elementt"></div>
<div class="elementt"></div>
<div class="elementt"></div>
<div class="elementt"></div>
<div class="elementt"></div>
</div>
</div>
</div>
<div class="cont">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="horizontall-section2">
<div class="stickyy-wrapper2">
<div class="elementt-wrapper2">
</div>
</div>
</div>
<div class="cont">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>I'm a newbie to wordpress, Kindly guide me to achieve this.