I am trying to achieve vertical scroll if horizontal scroll ends.
I have 2 div one below the other .The first one contains the content which can be scrolled horizontally.(I have done this part) now I am stuck at how to make it scroll vertically to the 2nd div which is just below the 1st div after the content of 1st div ends.
I need some guidance to achieve this any plugin or code will help . i will do it myself I just need the path to follow.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body,html{
height: 100%;
width: 100%;
}
.div{
width: 100%;
height: 100%;
}
.red{
background-color: red;
}
.green{
background-color: green;
}
.wrapper{
overflow-x:hidden;
}
.insideWrapper{
background: black;
height: 400px;
width: 3300px;
overflow-x: visible;
overflow-x: scroll;
margin: 135px 0;
display: flex;
align-items: center;
}
.inside{
width: 200px;
height: 200px;
background-color: rebeccapurple;
display: inline-block
}
.inside:nth-child(2n){
background-color: mediumseagreen;
}
.inside:nth-child(3n+1){
background-color: yellow;
}
.insideWrapper::-webkit-scrollbar {
width: 0px;
}
</style>
</head>
<body>
<div class="wrapper red div">
<div class=" insideWrapper">
<div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div><div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div><div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div><div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div><div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div><div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div><div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div><div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div>
</div>
</div>
<div class="green div"></div>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'> </script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery- mousewheel/3.1.13/jquery.mousewheel.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$(".insideWrapper").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 30);
event.preventDefault();
});
});
</script>
</body>
