Currently in the process of developing a website, I've integrated stellar.js for parallax effects and niceScroll.js to ensure smooth scrolling. However, I'm facing an issue where I am unable to scroll both horizontally and vertically. To address vertical scrolling limitations, I have explicitly set the height property of "body" to 500% and "html" to 100%. Unfortunately, this workaround does not apply to the width property.
It's worth noting that removing nicescroll's initialization from my JS file disables scrolling completely. Regardless of how much I adjust the width and height properties, no directional scrolling is possible.
Below is a basic outline of the HTML structure:
<html>
<body>
<div class="main">
<div class="slide" data-slide="1" data-stellar-background-ratio="0.2">
<div id="slide-1">content</div>
</div>
<div class="slide" data-slide="1" data-stellar-background-ratio="0.2">
<div id="slide-2">content</div>
</div>
</div>
</body>
</html>
The corresponding CSS styling:
html{
font-family: 'Montserrat', sans-serif;
width:auto;
height:100%;
}
body{
font-family: 'Montserrat', sans-serif;
width:auto;
height:500%;
}
.slide{
background-attachment:fixed;
width:100%;
height:100vh;
position:relative;
}
.main{
height:100vh;
}
#slide1{
width:100%;
height:100%;
background: url(../imgs/bkg-home-1.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Finally, here's the JavaScript implementation:
$(document).ready(function() {
$("html").niceScroll(); // Initialize nicescroll functionality
$('.main').stellar();
});
If anyone has encountered a similar scenario or can provide insights on overcoming this obstacle, your assistance would be greatly appreciated as it remains quite frustrating to debug.