My problem is that when I go in the mobile view, scrolling is not free. My page has no problem in displaying the desktop and the scrolling is in three sections(as you can see), but I want the scrolling to be free in the mobile view, that means i dont want it to be in three sections
$(window).on('resize', function(){
var win = $(this);
if (win.width() >= 768) {
$( "#main" ).attr( "data-fs-scroll" );
$( "#link" ).attr( "href" );
$( "#script" ).attr( "src" );
$("#main").addClass('main');
}
else{
$("#main").removeClass('main');
$( "#main" ).removeAttr( "data-fs-scroll" );
$( "#link" ).removeAttr( "href" );
$( "#script" ).removeAttr( "src" );
}
});<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="shortcut icon" href="css/img/logo.png">
<link id="link" rel="stylesheet" href="one-page-scroll-fsscroll/src/jquery.fsscroll.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script id="script" src="one-page-scroll-fsscroll/src/jquery.fsscroll.min.js"></script>
<title>Tiger</title>
</head>
<body>
<div id="main" class="main" data-fs-scroll>
<div class="sections" id="section">
<div class="section section0">
</div>
<div class="section section1">
</div>
<div class="section section2">
</div>
</div>
</div>
</body>if(window.innerWidth < 767) {
$(window).on('resize', function(){
var win = $(this);
if (win.width() >= 768) {
$( "#main" ).attr( "data-fs-scroll" );
$( "#link" ).attr( "href" );
$( "#script" ).attr( "src" );
$("#main").addClass('main');
}
else{
$("#main").removeClass('main');
$( "#main" ).removeAttr( "data-fs-scroll" );
$( "#link" ).removeAttr( "href" );
$( "#script" ).removeAttr( "src" );
}
});