horizontal scrolling section Html & css
To enable horizontal scrolling, we can use the CSS property overflow-x. If we assign the value scroll to the overflow-x property of the container element, the browser will hide horizontally overflowing content and make it accessible via horizontal scrolling.
STEP: 1
Use CSS to specify a scroll behavior.
<style>
#sectionPin {
height: 100vh;
overflow: hidden;
display: flex;
left: 0;
right: 0;
background: var(--text-color);
color: var(--bg-color);
}
.pin-wrap {
height: 100vh;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 50px 10vw;
}
.pin-wrap>* {
min-width: 90vw;
padding: 0 5vw;
}
</style>
Step: 2
Use HTML
<section id="sectionPin">
<div class="pin-wrap">
<div class="row align-items-center">
<P>TEXT</P>
</div>
</div>
</section>
step : 3
Use Javascript
<script src="<?php echo base_url()?>assets/scroll/jquery.js" type="text/javascript"> </script>
<script src="<?php echo base_url()?>assets/scroll/jquery1.js" type="text/javascript"></script>