当我尝试在移动设备上滚动网站时，我的网站出现问题，有时它会锁定，甚至当您在设备上滑动手指时，网站也无法正常移动。在桌面上滚动效果很好。我试图找到解决方案，但无法找出问题所在。
您可以使用开发人员工具在 375 px 分辨率或移动设备上进行测试 here
Bootstrap 4 模板:Creative Tim 的 NOW UI 套件
我认为问题出在 cookie 脚本上，但是当我通过在 HTML 中注释来禁用它时，问题并没有解决。我尝试注释我的 JS 文件的部分内容，但仍然不起作用。
这是我的 JS 脚本:
var selectedClass = "";
$(".filter").click(function () {
selectedClass = $(this).attr("data-rel");
$("#gallery").fadeTo(100, 0.1);
$("#gallery div").not("." + selectedClass).fadeOut().removeClass('animation');
setTimeout(function () {
$("." + selectedClass).fadeIn().addClass('animation');
$("#gallery").fadeTo(300, 1);
}, 300);
});
$( "#scrollDown" ).click(function() {
$( "html, body" ).animate({
scrollTop: 600
}, 600, function() {
// Animation complete.
});
});
//Gallery Animations
baguetteBox.run('.grid-gallery', { animation: 'slideIn' });
//Anchor Function
function scrollToAnchor(aid){
let aTag = $("a[name='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top}, 900);
}
//Menu Anchors Animations
$("#lexuslink").click(function() {
scrollToAnchor('lexus');
});
$("#fiatlink").click(function() {
scrollToAnchor('fiat');
});
$("#merclink").click(function() {
scrollToAnchor('merc');
});
$("#homelink").click(function(){
$('html, body').animate({scrollTop: 0}, 900)
});
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
let hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});
}
});
});
//E-mail Validation Function
$(".test").hide();
function validateForm() {
const name = document.getElementById('name').value;
if (name == "") {
document.querySelector('.status').innerHTML = "Wypełnij wszystkie pola.";
return false;
}
const email = document.getElementById('email').value;
if (email == "") {
document.querySelector('.status').innerHTML = "Wpisz swój adres email";
return false;
} else {
const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (!re.test(email)) {
document.querySelector('.status').innerHTML = "Wpisz poprawny e-mail.";
return false;
}
}
const subject = document.getElementById('subject').value;
if (subject == "") {
document.querySelector('.status').innerHTML = "Wpisz temat wiadomości.";
return false;
}
const message = document.getElementById('message').value;
if (message == "") {
document.querySelector('.status').innerHTML = "Message cannot be empty";
return false;
}
document.querySelector('.status').innerHTML = "Wysyłanie...";
document.getElementById('contact-form').submit();
}
这是我的 HTML 文件:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="keywords" content="samochody,do,ślubu,wynajem,lexus,fiat,zabytkowe,klasyczne,mercedes,fiat">
<meta name="author" content="Daniel Mydlarz">
<title>Samochody do ślubu - Oświęcim i okolice</title>
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/now-ui-kit.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="sass/baguetteBox.min.css">
<link rel="stylesheet" type="text/css" href="sass/style.css">
<link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link href="https://fonts.googleapis.com/css?family=Mansalva|Princess+Sofia&display=swap&subset=latin-ext"
rel="stylesheet">
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="code.js"></script>
</head>
<body class="landing-page sidebar-collapse">
<nav class="navbar navbar-expand-lg bg-primary fixed-top navbar-transparent" color-on-scroll="300">
<div class="container">
<div class="dropdown button-dropdown d-lg-none">
<a href="#pablo" class="dropdown-toggle" id="navbarDropdown" data-toggle="dropdown">
<span class="button-bar"></span>
<span class="button-bar"></span>
<span class="button-bar"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-header">MENU</a>
<a class="dropdown-item" href="#lexus">Samochody</a>
<a class="dropdown-item" href="#galeria">Galeria</a>
<a class="dropdown-item" href="#oferta">Oferta</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#kontakt">Kontakt</a>
</div>
</div>
<div class="navbar-translate">
<a class="align-baseline nav-link d-lg-none d-xl-none d-md-none float-left" rel="tooltip"
title="Zadzwon teraz aby dowiedziec sie wiecej" data-placement="bottom" href="tel:792-877-785"
target="_blank">
<i class="fa fa-phone" style="font-size:34px;color: white"></i>
</a>
<button class="navbar-toggler navbar-toggler" type="button" data-toggle="collapse"
data-target="#navigation" aria-controls="navigation-index" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-bar top-bar"></span>
<span class="navbar-toggler-bar middle-bar"></span>
<span class="navbar-toggler-bar bottom-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse fx-start" id="navigation"
data-nav-image="./assets/img/blurred-image-1.jpg">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" name="home" id="homelink" class="nav-link bleft">HOME</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdownbtn" href="" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Samochody
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuMenu">
<a href="#lexus" class="dropdown-item" id="lexuslink" name="itmlexus"
type="button">Lexus</a>
<a href="#fiat" class="dropdown-item" id="fiatlink" name="itmfiat" type="button">Fiat</a>
<a href="#merc" class="dropdown-item" id="merclink" name="itmmerc"
type="button">Mercedes</a>
</div>
</li>
<li class="nav-item">
<a href="#galeria" class="nav-link bleft">Galeria</a>
</li>
<li class="nav-item">
<a href="#oferta" class="nav-link bleft">Oferta</a>
</li>
<li class="nav-item">
<a href="#kontakt" class="nav-link bleft last">Kontakt</a>
</li>
<li class="nav-item position-right10">
<a class="nav-link" rel="tooltip" title="Zadzwon teraz aby dowiedziec sie wiecej"
data-placement="bottom" href="tel:792-877-785" target="_blank">
<i class="fa fa-phone" style="font-size:34px;color: white"></i>
</a>
</li>
<li class="nav-item position-right">
<a class="nav-link" rel="tooltip" title="Sprawdź nas na Facebook'u" data-placement="bottom"
href="https://www.facebook.com/Samochody-do-Ślubu-Oświęcim-i-okolice-586389625167858"
target="_blank">
<i class="fa fa-facebook-official" style="font-size:34px;color:white"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Navbar -->
<div class="wrapper">
<div class="container-fluid p-0" style="overflow:hidden">
<div class="wrapper">
<div class="page-header page-header-small">
<div class="page-header-image" data-parallax="true"
style="background-image: url('img/slub-bg2.jpg')">
</div>
<div class="content-center welcome-text">
<div class="container-fluid landing-text">
<h1 class="h1-respononsive h1-title weird-font">Nowoczesne i klasyczne samochody do ślubu
</h1>
<h3 class="h3-responsive h3-title">Pozwól sobie na odrobinę luksusu...
</h3>
<i class="fa fa-angle-double-down fa-4x arrow-down pb-2" id="scrollDown"
aria-hidden="true"></i>
</div>
</div>
</div>
<main>
<section>
<a name="lexus"></a>
<div class="section pt-2 section-about-us">
<div class="container">
<div class="row" id="lexus">
<div class="col-md-8 ml-auto mr-auto text-center">
<h2 class="h2-responsive
font-weight-bold title my-4 border-top border-bottom py-2">
Nowoczesny Lexus</h2>
<div class="container-lexus-photo pb-4">
<img src="./img/bg-2.jpg" alt="Lexus" class="img-fluid">
</div>
</div>
</div>
<a name="fiat" />
<div class="row" id="fiat">
<div class="col-md-8 ml-auto mr-auto text-center">
<h2 class="h2-responsive
font-weight-bold title my-4 border-top border-bottom py-2">
Zabytkowy Fiat 126p</h2>
<div class="container-lexus-photo pb-4">
<img src="./img/fiat1.jpg" alt="Fiat 126p" class="img-fluid">
</div>
</div>
</div>
<a name="merc" />
<div class="row" id="merc">
<div class="col-md-8 ml-auto mr-auto text-center">
<h2 class="h2-responsive
font-weight-bold title my-4 border-top border-bottom py-2">
Klasyczny Mercedes</h2>
<div class="container-lexus-photo pb-4">
<img src="./img/merc1.jpg" alt="Mercedes" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- GALERIA -->
<h2 class="h2-responsive font-weight-bold text-center border-top border-bottom py-2" id="galeria">
Galeria
</h2>
<section class="gallery-block grid-gallery">
<div class="container">
<div class="btn-group-ctn">
<button type="button" class="btn btn-info filter" data-rel="all">Wszystkie</button>
<button type="button" class="btn btn-info filter" data-rel="1">Lexus</button>
<button type="button" class="btn btn-info filter" data-rel="3">Mercedes</button>
<button type="button" class="btn btn-info filter" data-rel="2">Fiat 126p</button>
</div>
<div class="row gallery" id="gallery">
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/1.jpg">
<img class="img-fluid image scale-on-hover" src="./img/1.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/2.jpg">
<img class="img-fluid image scale-on-hover" src="./img/2.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/3.jpg">
<img class="img-fluid image scale-on-hover" src="./img/3.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/4.jpg">
<img class="img-fluid image scale-on-hover" src="./img/4.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/5.jpg">
<img class="img-fluid image scale-on-hover" src="./img/5.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/6.jpg">
<img class="img-fluid image scale-on-hover" src="./img/6.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/7.jpg">
<img class="img-fluid image scale-on-hover" src="./img/7.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/8.jpg">
<img class="img-fluid image scale-on-hover" src="./img/8.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 2">
<a class="lightbox" href="./img/fiat01.jpg">
<img class="img-fluid image scale-on-hover" src="./img/fiat01.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 2">
<a class="lightbox" href="./img/fiat02.jpg">
<img class="img-fluid image scale-on-hover" src="./img/fiat02.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 2">
<a class="lightbox" href="./img/fiat03.jpg">
<img class="img-fluid image scale-on-hover" src="./img/fiat03.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 2">
<a class="lightbox" href="./img/fiat04.jpg">
<img class="img-fluid image scale-on-hover" src="./img/fiat04.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 2">
<a class="lightbox" href="./img/fiat05.jpg">
<img class="img-fluid image scale-on-hover" src="./img/fiat05.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 2">
<a class="lightbox" href="./img/fiat06.jpg">
<img class="img-fluid image scale-on-hover" src="./img/fiat06.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 3">
<a class="lightbox" href="./img/merc2.jpg">
<img class="img-fluid image scale-on-hover" src="./img/merc2.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 3">
<a class="lightbox" href="./img/merc3.jpg">
<img class="img-fluid image scale-on-hover" src="./img/merc3.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 3">
<a class="lightbox" href="./img/merc4.jpg">
<img class="img-fluid image scale-on-hover" src="./img/merc4.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 3">
<a class="lightbox" href="./img/merc5.jpg">
<img class="img-fluid image scale-on-hover" src="./img/merc5.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 3">
<a class="lightbox" href="./img/merc6.jpg">
<img class="img-fluid image scale-on-hover" src="./img/merc6.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 3">
<a class="lightbox" href="./img/merc7.jpg">
<img class="img-fluid image scale-on-hover" src="./img/merc7.jpg">
</a>
</div>
</div>
</div>
</section>
</main>
</div>
<h2 id="oferta" class="h2-responsive font-weight-bold text-center border-top border-bottom py-2 my-5">
Oferta</h2>
<section class="pricing py-5">
<div class="container">
<div class="row center-offer">
<!-- Free Tier -->
<div class="col-lg-8">
<div class="card mb-5 mb-lg-0">
<div class="card-body">
<h6 class="card-price text-center"><span class="period">od</span> 399 <span
class="period">zł</span>
</h6>
<ul class="fa-ul">
<h4 class="text-muted mt-1">Cena zawiera:</h4>
<li>
Wybrany samochód</li>
<li>
Dojazd do domu
Pani młodej oraz Pana młodego</li>
<li>
Dojazd do kościoła
pary młodej
</li>
<li>
Przejazd na
weselną sale
</li>
</ul>
<a href="#kontakt" class="btn btn-block btn-primary text-uppercase">Zapytaj o
wolne terminy</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="mb-4 pt-5 px-1" id="kontakt">
<div class="container">
<!--Section heading-->
<h2 class="h2-responsive font-weight-bold text-center my-4 border-top border-bottom py-2">
Skontaktuj się z nami</h2>
<!--Section description-->
<p class="text-center w-responsive mx-auto mb-5">Masz jakieś pytania? Chcesz dobrać indywidualną
ofertę?
</p>
<div class="row">
<!--Grid column-->
<div class="col-md-9 mb-md-0 mb-5 contact-form">
<form id="contact-form" name="contact-form" action="mail.php" method="POST">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="name" name="name" class="form-control">
<label for="name" class="">Twoje imię</label>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="email" name="email" class="form-control">
<label for="email" class="">Twój e-mail</label>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row">
<div class="col-md-12">
<div class="md-form mb-0">
<input type="text" id="subject" name="subject" class="form-control">
<label for="subject" class="">Temat</label>
</div>
</div>
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-12">
<div class="md-form">
<textarea type="text" id="message"
placeholder="Witam, interesuję mnie wynajem samochodu w terminie ..."
name="message" rows="2" class="form-control md-textarea"></textarea>
<label for="message">Twoja wiadomość</label>
</div>
</div>
</div>
<!--Grid row-->
</form>
<div class="text-center text-md-left">
<a class="btn btn-submit" onclick="validateForm()">Wyślij</a>
</div>
<div class="status"></div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-3 text-center kontakt-info">
<ul class="list-unstyled mb-0">
<li>
<i class="fa fa-map-marker fa-2x" aria-hidden="true"></i>
<p>32-600 Oświęcim, <br>
ul. Zagrodowa 31B</p>
</li>
<li><i class="fa fa-phone mt-4 fa-2x" style="color: black"></i>
<p>+48 792-877-785</p>
</li>
<li>
<i class="fa fa-envelope mt-4 fa-2x" aria-hidden="true" style="color: black"></i>
<p>kodiaqrentacar@gmail.com</p>
</li>
</ul>
</div>
<!--Grid column-->
</div>
</div>
</section>
</div>
<!-- Plugins -->
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/cookie-bar/cookiebar-latest.min.js?theme=white&always=1"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.11.0/baguetteBox.js" async></script>
<!-- Core JS Files -->
<script src="assets/js/core/jquery.min.js" type="text/javascript"></script>
<script src="assets/js/core/popper.min.js" type="text/javascript"></script>
<script src="assets/js/core/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.6/js/mdb.min.js"></script>
<!-- Plugin for Switches, full documentation here: http://www.jque.re/plugins/version3/bootstrap.switch/ -->
<script src="assets/js/plugins/bootstrap-switch.js"></script>
<!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
<script src="assets\js\plugins/nouislider.min.js" type="text/javascript"></script>
<!-- Plugin for the DatePicker, full documentation here: https://github.com/uxsolutions/bootstrap-datepicker -->
<script src="assets/js/plugins/bootstrap-datepicker.js" type="text/javascript"></script>
<!-- Google Maps Plugin -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
<!-- Control Center for Now Ui Kit: parallax effects, scripts for the example pages etc -->
<script src="assets/js/now-ui-kit.js?v=1.3.0" type="text/javascript"></script>
</body>
</html>
也许有人也遇到过类似的问题，希望看到你们的一些建议。如果您需要另一个脚本，请告诉我，希望我们一起解决这个问题。
最诚挚的问候丹尼尔。
最佳答案
您需要从 css 文件中删除以下 css 代码。
.wrapper {
overflow-x: hidden;
}
并且还需要更新576px媒体查询中元素#kontakt p的字体大小，现在它是1.1rem需要减少0.9rem。
我希望完成这两个小更改后，您的滚动问题将得到解决。
关于javascript - 滚动在移动设备上被锁定，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58872421/