Chrome 中的奇怪滚动问题（无法使用鼠标滚轮滚动）
Strange scrolling issue in Chrome (Can't scroll with mousewheel)
我做了一些事情（我显然无法弄清楚是什么）在我网站的单个页面上弄乱了 Google Chrome 桌面浏览器的滚动。我使用的是html模板（Django），但是当我构建一个完整的网页时，问题仍然存在，如下所示。另外值得注意的是，我正在使用 tailwindcss，但这似乎与问题没有直接关系。
奇怪的是，鼠标滚轮滚动在 Firefox 和移动设备上有效，甚至按下 Page Down/Up、拖动滚动条和选择文本在桌面上也能正常工作，只是鼠标滚轮不起作用。我在这里搜索过类似的问题，但我发现的问题对我的情况没有用。
我认为问题围绕着设置为 overflow-y: auto 且具有 3px 透视图和一些视差部分的包装元素。 （不过去掉这个属性好像对这个问题没有影响。）另外一个wrapper元素一模一样，但是没有parallax sections的页面没有同样的问题，所以好像不是scroll settings on the包装器本身。以下是完整模板：
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Tailwind CSS-->
<link href="../../static/main/css/tailwind.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="../../static/main/css/temp.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body class="h-screen">
<header>
<nav class="_navbar" role="navigation">
<div class="nav-cont flex items-center">
<div class="nav-flex-left w-1/2">
<a id="logo-container" href="#" class="font-semibold text-white no-underline text-3xl md:text-4xl my-2 md:my-1">Brand Logo</a>
</div>
<div class="w-1/2 md:hidden nav-flex-right text-3xl items-center">
<div class="my-2" onclick="openMenu()"><i id="hamburger" class="fas fa-bars cursor-pointer "></i></div>
</div>
<div class="w-1/2 hidden md:block">
<ul class="nav-flex-right">
<li class="md-nav-link"><a href="#" class="_nav-link">Nav 3</a></li>
<li class="md-nav-link"><a href="#" class="_nav-link">Nav 2</a></li>
<li class="md-nav-link"><a href="#" class="_nav-link active">Nav 4</a></li>
</ul>
</div>
</div>
<div id="smMenu" class="flex flex-col bg-purple-800 pt-2 pb-4 px-1 space-y-3 hidden rounded-b-lg shadow-lg">
<a href="#" class="_nav-link active sm-nav-link hover:bg-purple-700 rounded w-1/2">Nav 1</a>
<a href="#" class="_nav-link sm-nav-link hover:bg-purple-700 rounded w-1/2">Nav 2</a>
<a href="#" class="_nav-link sm-nav-link hover:bg-purple-700 rounded w-1/2">Nav 3</a>
</div>
</nav>
</header>
<main id="main-wrapper" class="flex flex-col items-center justify-center bg-blue-300">
<!--{% block content %}-->
<div id="wrapper" class="z-20">
<section id="top" class="section parallax bg1 non-static">
<div class="flex items-center">
<div class="flex-auto w-screen text-center"><h1
class="text-center text-purple-200 text-8xl md:mt-20 md:text-9xl mb-10" style="font-family: Shoulders">
Virtual Practice</h1>
<h1 class="text-2xl font-semibold md:text-6xl shoulders-bold">Time for a tech makeover?</h1></div>
</div>
</section>
<section id="middle" class="section mb-10 bg-gray-200 shadow-lg ">
<div class="container mx-auto">
<div class="flex justify-center items-center">
<div class="flex flex-col space-y-4 p-4 md:space-y-0 md:space-x-4 md:py-0 md:px-4 md:flex-row text-purple-500">
<div class="flex-auto barlow bg-white rounded-lg p-4 shadow-lg">
<div class="text-center shoulders-bold"><i class="fas fa-hands-helping text-5xl mb-2"></i>
<h1 class="mb-5 font-semibold text-purple-800 text-2xl">Title 1</h1></div>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi quis commodo odio aenean sed adipiscing. Consequat interdum varius sit amet mattis vulputate. Fringilla urna porttitor rhoncus dolor purus non enim praesent. In cursus turpis massa tincidunt dui ut ornare lectus sit. Fermentum iaculis eu non diam phasellus vestibulum. Malesuada fames ac turpis egestas maecenas pharetra. Dignissim convallis aenean et tortor at risus viverra adipiscing. Eu nisl nunc mi ipsum faucibus vitae aliquet. Mi ipsum faucibus vitae aliquet nec ullamcorper sit amet. Elementum nisi quis eleifend quam. Euismod elementum nisi quis eleifend quam adipiscing vitae. Pulvinar mattis nunc sed blandit. Ipsum dolor sit amet consectetur adipiscing elit.</p></div>
<div class="flex-auto barlow rounded-lg p-4 bg-white shadow-lg">
<div class="text-center shoulders-bold"><i class="fas fa-laptop-house text-5xl mb-2"></i>
<h1 class="mb-5 font-semibold text-purple-800 text-2xl">Title 2</h1></div>
<p class="text-justify">Condimentum vitae sapien pellentesque habitant morbi. Sagittis orci a scelerisque purus semper eget duis at tellus. Sit amet nulla facilisi morbi tempus iaculis. Magna eget est lorem ipsum dolor sit amet consectetur adipiscing. Mauris pharetra et ultrices neque ornare. Ut tellus elementum sagittis vitae. Ut tristique et egestas quis. Ut porttitor leo a diam sollicitudin tempor id eu nisl. Quam adipiscing vitae proin sagittis nisl. Enim eu turpis egestas pretium aenean. Sollicitudin tempor id eu nisl. Turpis in eu mi bibendum neque. Sed viverra tellus in hac habitasse platea dictumst. Id venenatis a condimentum vitae. Enim neque volutpat ac tincidunt vitae semper quis lectus nulla. Proin libero nunc consequat interdum varius sit amet mattis. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Tincidunt arcu non sodales neque sodales ut etiam sit. Sed vulputate mi sit amet mauris commodo quis imperdiet massa.</p></div>
<div class="flex-auto barlow bg-white rounded-lg p-4 shadow-lg">
<div class="text-center shoulders-bold"><i class="fas fa-weight-hanging text-5xl mb-2"></i>
<h1 class="mb-5 font-semibold text-purple-800 text-2xl">Title 3</h1></div>
<p class="text-justify">Facilisis magna etiam tempor orci eu lobortis. Malesuada fames ac turpis egestas maecenas pharetra. Mollis aliquam ut porttitor leo. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus est. In hendrerit gravida rutrum quisque non tellus orci. Ac turpis egestas integer eget aliquet nibh praesent tristique magna. Egestas erat imperdiet sed euismod nisi porta lorem. Porttitor lacus luctus accumsan tortor posuere. Nam aliquam sem et tortor consequat. Cursus turpis massa tincidunt dui ut ornare. Amet consectetur adipiscing elit duis tristique sollicitudin nibh sit. Augue neque gravida in fermentum et sollicitudin ac. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Velit ut tortor pretium viverra suspendisse potenti.</p></div>
</div>
</div>
</div>
</section>
<section id="bottom" class="section h-1/2 parallax bg2 non-static">
<div class="flex flex-col w-screen text-center px-4"><h1 class="flex-auto text-3xl font-semibold shoulders-bold">Sagittis purus sit amet volutpat consequat mauris nunc.</h1>
<div class="flex flex-auto my-10 justify-center space-x-4 md:space-x-20">
<a href="tel:+123123123123" class="callout-btn">Call Now
</a>
<a href="#" class="callout-btn">Contact
Online
</a>
</div>
</div>
</section>
<section id="footer" class="bg-gray-200 shadow-lg" style="min-height: 30vh">
<div class="container mx-auto">
<div class="flex justify-center items-center">
<div class="flex flex-col items-center space-y-4 p-4 md:space-y-0 md:space-x-4 md:py-0 md:px-4 md:flex-row text-purple-500 my-3">
<div class="flex-auto items-center bg-white rounded-lg p-4 shadow-lg">
<div class="text-center">
<h1 class="mb-5 font-semibold text-purple-800 text-2xl shoulders-bold">More reasons to choose us:</h1></div>
<p>Ornare lectus sit amet est placerat in egestas erat. Orci nulla pellentesque dignissim enim sit amet venenatis urna. Imperdiet proin fermentum leo vel orci porta. Sed lectus vestibulum mattis ullamcorper velit sed ullamcorper. Neque ornare aenean euismod elementum. Aliquet nec ullamcorper sit amet. Vel facilisis volutpat est velit egestas dui id ornare. Diam vel quam elementum pulvinar etiam non quam lacus suspendisse. Id ornare arcu odio ut sem. Mauris nunc congue nisi vitae suscipit tellus mauris a diam. Maecenas sed enim ut sem viverra aliquet eget. Vel fringilla est ullamcorper eget. Nunc id cursus metus aliquam. Id nibh tortor id aliquet lectus proin nibh. Ipsum faucibus vitae aliquet nec ullamcorper sit.</p>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!--{% endblock content %}-->
</main>
<footer id="footer" class="flex justify-center bg-gray-100 shadow-inner" style="max-height: 6vh; z-index: 9999"><div class="flex items-center container justify-between py-3"><p>Copyright © Brand 2020</p><p>©<a class="brown-text text-lighten-3" href="http://google.com">Goigyle</a> 2021</p></div>
</footer>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
crossorigin="anonymous"></script>
<script type="application/javascript" src="../../static/main/js/main.js"></script>
</body>
</html>
和相关的 CSS:
body {
overflow: auto;
}
#main-wrapper {
overflow-y: hidden;
overflow-x: hidden;
width: 100vw;
height: 94vh;
padding-top: 64px;
}
#wrapper {
perspective: 4px;
width: 100vw;
overflow-y: auto;
overflow-x: hidden;
z-index: 100;
}
.section {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 50vh;
}
.bg1::after {
background-image: url('../img/nurse_ipad@0,25x.jpg');
background-position: center bottom;
background-size: cover;
}
@media(max-width: 576px) {
.bg1::after {
background-position: 10% 100%;
}
}
.bg2::after {
position: relative;
background-image: url('../img/worried@0,25x.jpg');
background-position: center top;
background-size: cover;
}
.static {
min-height: 60vh;
padding-top: 2rem;
padding-bottom: 2rem;
}
.non-static {
color: white;
text-shadow: 3px 3px 5px #000;
min-height: 50vh;
}
#bottom {
margin-top: 3rem;
}
.parallax::after {
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
transform: translateZ(-1px) scale(1.6);
-webkit-transform: translateZ(-1px) scale(1.6);
-moz-transform: translateZ(-1px) scale(1.6);
z-index: -1;
}
为了以防万一，这是我的顺风css来源css文件：
@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
font-family: "Shoulders";
src: url("../fonts/BigShouldersInlineText-Regular.ttf");
font-display: swap;
}
a {
@apply no-underline hover:underline font-semibold
}
@keyframes openMenu {
0% {height: 30%;}
75% {height: 95%;}
100% {height: 100%;}
}
._navbar {
@apply bg-purple-800 shadow-lg fixed text-white justify-center items-center py-1;
height: 64px;
width: 100%;
z-index: 1;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
._navbar a {
@apply no-underline hover:no-underline
}
.nav-cont {
@apply container mx-auto px-4;
}
.nav-flex-left {
@apply flex flex-row;
}
.nav-flex-right {
@apply flex flex-row-reverse;
}
._nav-link {
@apply font-semibold text-purple-300 hover:text-purple-400 hover:shadow-sm;
}
.md-nav-link {
@apply ml-5 my-4
}
.sm-nav-link {
@apply px-4
}
.active {
@apply text-white hover:text-white;
}
.callout-btn {
@apply px-3 rounded-xl bg-purple-800 hover:bg-purple-900 hover:no-underline text-white text-center h-16 flex-auto shadow-lg hover:shadow-sm border-2 border-purple-800 hover:border-purple-200 cursor-pointer px-4 flex items-center justify-center text-lg md:text-2xl py-4 md:py-3;
font-family: Big Shoulders Text;
width: 10rem;
}
input {
width: 100%;
border-radius: 5px;
padding-left: .5rem;
margin-bottom: 1rem;
}
textarea {
width: 100%;
border-radius: 5px;
padding-left: .5rem;
padding-right: .5rem;
}
label {
font-size: .8rem;
}
.home-title {
font-size: 5rem;
color: white;
}
.home-subheading {
font-size: 2.5rem;
text-shadow: 2px 2px #000;
}
.main-title {
font-size: 3rem;
color: white;
}
.subheading {
font-size: 1.5rem;
}
/*Training Units page*/
.jumbotron {
background: url("../img/elearning-wide.png") no-repeat #ddd6fe;
background-size: contain;
background-position: center;
padding-top: 2rem;
padding-bottom: 2rem;
margin-bottom: 0;
border-radius: 25px;
height: 40vh;
}
.jumbotron p:last-child {
margin-bottom: 0;
}
.choice-btn {
width: 5rem;
}
@media (max-width: 991px) {
.jumbotron {
background: url("../img/elearning.png") 55% 80% no-repeat #ddd6fe;
background-size: contain;
border: 4px solid #593196;
border-radius: 12px;
padding-top: 3rem;
padding-bottom: 3rem;
padding-right: 1rem;
padding-left: 1rem;
height: 30vh;
}
}
/*Wider screened smartphones*/
@media (max-width: 414px) {
}
/*Normal screened smartphones*/
@media (max-width: 375px) {
}
/*Smaller screened smartphones:*/
@media (max-width: 320px) {
}
我已经尝试了我认为是 z-index 和 overflow-y 的所有可能组合，我已经尝试按照其他答案中的说明缩放页面，现在我完全被我所有的东西难住了研究无果。
当心：使用括号编辑器的实时视图时，它似乎确实在滚动.
如果有人能阐明为什么这可能开始发生，并可能引导我摆脱我造成的混乱，并找到一种更可靠的方式来实现我想要的，我将非常感激重新：滚动页面的中间部分（顶部导航栏和页脚之间）。
编辑：完整（清除）tailwind.css here 如果你需要的话。
找到解决方法。将 transform: translateZ(0) 添加到我的主要内容会将用户输入设置为该内容，我可以再次滚动。
我做了一些事情（我显然无法弄清楚是什么）在我网站的单个页面上弄乱了 Google Chrome 桌面浏览器的滚动。我使用的是html模板（Django），但是当我构建一个完整的网页时，问题仍然存在，如下所示。另外值得注意的是，我正在使用 tailwindcss，但这似乎与问题没有直接关系。
奇怪的是，鼠标滚轮滚动在 Firefox 和移动设备上有效，甚至按下 Page Down/Up、拖动滚动条和选择文本在桌面上也能正常工作，只是鼠标滚轮不起作用。我在这里搜索过类似的问题，但我发现的问题对我的情况没有用。
我认为问题围绕着设置为 overflow-y: auto 且具有 3px 透视图和一些视差部分的包装元素。 （不过去掉这个属性好像对这个问题没有影响。）另外一个wrapper元素一模一样，但是没有parallax sections的页面没有同样的问题，所以好像不是scroll settings on the包装器本身。以下是完整模板：
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Tailwind CSS-->
<link href="../../static/main/css/tailwind.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="../../static/main/css/temp.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body class="h-screen">
<header>
<nav class="_navbar" role="navigation">
<div class="nav-cont flex items-center">
<div class="nav-flex-left w-1/2">
<a id="logo-container" href="#" class="font-semibold text-white no-underline text-3xl md:text-4xl my-2 md:my-1">Brand Logo</a>
</div>
<div class="w-1/2 md:hidden nav-flex-right text-3xl items-center">
<div class="my-2" onclick="openMenu()"><i id="hamburger" class="fas fa-bars cursor-pointer "></i></div>
</div>
<div class="w-1/2 hidden md:block">
<ul class="nav-flex-right">
<li class="md-nav-link"><a href="#" class="_nav-link">Nav 3</a></li>
<li class="md-nav-link"><a href="#" class="_nav-link">Nav 2</a></li>
<li class="md-nav-link"><a href="#" class="_nav-link active">Nav 4</a></li>
</ul>
</div>
</div>
<div id="smMenu" class="flex flex-col bg-purple-800 pt-2 pb-4 px-1 space-y-3 hidden rounded-b-lg shadow-lg">
<a href="#" class="_nav-link active sm-nav-link hover:bg-purple-700 rounded w-1/2">Nav 1</a>
<a href="#" class="_nav-link sm-nav-link hover:bg-purple-700 rounded w-1/2">Nav 2</a>
<a href="#" class="_nav-link sm-nav-link hover:bg-purple-700 rounded w-1/2">Nav 3</a>
</div>
</nav>
</header>
<main id="main-wrapper" class="flex flex-col items-center justify-center bg-blue-300">
<!--{% block content %}-->
<div id="wrapper" class="z-20">
<section id="top" class="section parallax bg1 non-static">
<div class="flex items-center">
<div class="flex-auto w-screen text-center"><h1
class="text-center text-purple-200 text-8xl md:mt-20 md:text-9xl mb-10" style="font-family: Shoulders">
Virtual Practice</h1>
<h1 class="text-2xl font-semibold md:text-6xl shoulders-bold">Time for a tech makeover?</h1></div>
</div>
</section>
<section id="middle" class="section mb-10 bg-gray-200 shadow-lg ">
<div class="container mx-auto">
<div class="flex justify-center items-center">
<div class="flex flex-col space-y-4 p-4 md:space-y-0 md:space-x-4 md:py-0 md:px-4 md:flex-row text-purple-500">
<div class="flex-auto barlow bg-white rounded-lg p-4 shadow-lg">
<div class="text-center shoulders-bold"><i class="fas fa-hands-helping text-5xl mb-2"></i>
<h1 class="mb-5 font-semibold text-purple-800 text-2xl">Title 1</h1></div>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi quis commodo odio aenean sed adipiscing. Consequat interdum varius sit amet mattis vulputate. Fringilla urna porttitor rhoncus dolor purus non enim praesent. In cursus turpis massa tincidunt dui ut ornare lectus sit. Fermentum iaculis eu non diam phasellus vestibulum. Malesuada fames ac turpis egestas maecenas pharetra. Dignissim convallis aenean et tortor at risus viverra adipiscing. Eu nisl nunc mi ipsum faucibus vitae aliquet. Mi ipsum faucibus vitae aliquet nec ullamcorper sit amet. Elementum nisi quis eleifend quam. Euismod elementum nisi quis eleifend quam adipiscing vitae. Pulvinar mattis nunc sed blandit. Ipsum dolor sit amet consectetur adipiscing elit.</p></div>
<div class="flex-auto barlow rounded-lg p-4 bg-white shadow-lg">
<div class="text-center shoulders-bold"><i class="fas fa-laptop-house text-5xl mb-2"></i>
<h1 class="mb-5 font-semibold text-purple-800 text-2xl">Title 2</h1></div>
<p class="text-justify">Condimentum vitae sapien pellentesque habitant morbi. Sagittis orci a scelerisque purus semper eget duis at tellus. Sit amet nulla facilisi morbi tempus iaculis. Magna eget est lorem ipsum dolor sit amet consectetur adipiscing. Mauris pharetra et ultrices neque ornare. Ut tellus elementum sagittis vitae. Ut tristique et egestas quis. Ut porttitor leo a diam sollicitudin tempor id eu nisl. Quam adipiscing vitae proin sagittis nisl. Enim eu turpis egestas pretium aenean. Sollicitudin tempor id eu nisl. Turpis in eu mi bibendum neque. Sed viverra tellus in hac habitasse platea dictumst. Id venenatis a condimentum vitae. Enim neque volutpat ac tincidunt vitae semper quis lectus nulla. Proin libero nunc consequat interdum varius sit amet mattis. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Tincidunt arcu non sodales neque sodales ut etiam sit. Sed vulputate mi sit amet mauris commodo quis imperdiet massa.</p></div>
<div class="flex-auto barlow bg-white rounded-lg p-4 shadow-lg">
<div class="text-center shoulders-bold"><i class="fas fa-weight-hanging text-5xl mb-2"></i>
<h1 class="mb-5 font-semibold text-purple-800 text-2xl">Title 3</h1></div>
<p class="text-justify">Facilisis magna etiam tempor orci eu lobortis. Malesuada fames ac turpis egestas maecenas pharetra. Mollis aliquam ut porttitor leo. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus est. In hendrerit gravida rutrum quisque non tellus orci. Ac turpis egestas integer eget aliquet nibh praesent tristique magna. Egestas erat imperdiet sed euismod nisi porta lorem. Porttitor lacus luctus accumsan tortor posuere. Nam aliquam sem et tortor consequat. Cursus turpis massa tincidunt dui ut ornare. Amet consectetur adipiscing elit duis tristique sollicitudin nibh sit. Augue neque gravida in fermentum et sollicitudin ac. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Velit ut tortor pretium viverra suspendisse potenti.</p></div>
</div>
</div>
</div>
</section>
<section id="bottom" class="section h-1/2 parallax bg2 non-static">
<div class="flex flex-col w-screen text-center px-4"><h1 class="flex-auto text-3xl font-semibold shoulders-bold">Sagittis purus sit amet volutpat consequat mauris nunc.</h1>
<div class="flex flex-auto my-10 justify-center space-x-4 md:space-x-20">
<a href="tel:+123123123123" class="callout-btn">Call Now
</a>
<a href="#" class="callout-btn">Contact
Online
</a>
</div>
</div>
</section>
<section id="footer" class="bg-gray-200 shadow-lg" style="min-height: 30vh">
<div class="container mx-auto">
<div class="flex justify-center items-center">
<div class="flex flex-col items-center space-y-4 p-4 md:space-y-0 md:space-x-4 md:py-0 md:px-4 md:flex-row text-purple-500 my-3">
<div class="flex-auto items-center bg-white rounded-lg p-4 shadow-lg">
<div class="text-center">
<h1 class="mb-5 font-semibold text-purple-800 text-2xl shoulders-bold">More reasons to choose us:</h1></div>
<p>Ornare lectus sit amet est placerat in egestas erat. Orci nulla pellentesque dignissim enim sit amet venenatis urna. Imperdiet proin fermentum leo vel orci porta. Sed lectus vestibulum mattis ullamcorper velit sed ullamcorper. Neque ornare aenean euismod elementum. Aliquet nec ullamcorper sit amet. Vel facilisis volutpat est velit egestas dui id ornare. Diam vel quam elementum pulvinar etiam non quam lacus suspendisse. Id ornare arcu odio ut sem. Mauris nunc congue nisi vitae suscipit tellus mauris a diam. Maecenas sed enim ut sem viverra aliquet eget. Vel fringilla est ullamcorper eget. Nunc id cursus metus aliquam. Id nibh tortor id aliquet lectus proin nibh. Ipsum faucibus vitae aliquet nec ullamcorper sit.</p>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!--{% endblock content %}-->
</main>
<footer id="footer" class="flex justify-center bg-gray-100 shadow-inner" style="max-height: 6vh; z-index: 9999"><div class="flex items-center container justify-between py-3"><p>Copyright © Brand 2020</p><p>©<a class="brown-text text-lighten-3" href="http://google.com">Goigyle</a> 2021</p></div>
</footer>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
crossorigin="anonymous"></script>
<script type="application/javascript" src="../../static/main/js/main.js"></script>
</body>
</html>
和相关的 CSS:
body {
overflow: auto;
}
#main-wrapper {
overflow-y: hidden;
overflow-x: hidden;
width: 100vw;
height: 94vh;
padding-top: 64px;
}
#wrapper {
perspective: 4px;
width: 100vw;
overflow-y: auto;
overflow-x: hidden;
z-index: 100;
}
.section {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 50vh;
}
.bg1::after {
background-image: url('../img/nurse_ipad@0,25x.jpg');
background-position: center bottom;
background-size: cover;
}
@media(max-width: 576px) {
.bg1::after {
background-position: 10% 100%;
}
}
.bg2::after {
position: relative;
background-image: url('../img/worried@0,25x.jpg');
background-position: center top;
background-size: cover;
}
.static {
min-height: 60vh;
padding-top: 2rem;
padding-bottom: 2rem;
}
.non-static {
color: white;
text-shadow: 3px 3px 5px #000;
min-height: 50vh;
}
#bottom {
margin-top: 3rem;
}
.parallax::after {
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
transform: translateZ(-1px) scale(1.6);
-webkit-transform: translateZ(-1px) scale(1.6);
-moz-transform: translateZ(-1px) scale(1.6);
z-index: -1;
}
为了以防万一，这是我的顺风css来源css文件：
@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
font-family: "Shoulders";
src: url("../fonts/BigShouldersInlineText-Regular.ttf");
font-display: swap;
}
a {
@apply no-underline hover:underline font-semibold
}
@keyframes openMenu {
0% {height: 30%;}
75% {height: 95%;}
100% {height: 100%;}
}
._navbar {
@apply bg-purple-800 shadow-lg fixed text-white justify-center items-center py-1;
height: 64px;
width: 100%;
z-index: 1;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
._navbar a {
@apply no-underline hover:no-underline
}
.nav-cont {
@apply container mx-auto px-4;
}
.nav-flex-left {
@apply flex flex-row;
}
.nav-flex-right {
@apply flex flex-row-reverse;
}
._nav-link {
@apply font-semibold text-purple-300 hover:text-purple-400 hover:shadow-sm;
}
.md-nav-link {
@apply ml-5 my-4
}
.sm-nav-link {
@apply px-4
}
.active {
@apply text-white hover:text-white;
}
.callout-btn {
@apply px-3 rounded-xl bg-purple-800 hover:bg-purple-900 hover:no-underline text-white text-center h-16 flex-auto shadow-lg hover:shadow-sm border-2 border-purple-800 hover:border-purple-200 cursor-pointer px-4 flex items-center justify-center text-lg md:text-2xl py-4 md:py-3;
font-family: Big Shoulders Text;
width: 10rem;
}
input {
width: 100%;
border-radius: 5px;
padding-left: .5rem;
margin-bottom: 1rem;
}
textarea {
width: 100%;
border-radius: 5px;
padding-left: .5rem;
padding-right: .5rem;
}
label {
font-size: .8rem;
}
.home-title {
font-size: 5rem;
color: white;
}
.home-subheading {
font-size: 2.5rem;
text-shadow: 2px 2px #000;
}
.main-title {
font-size: 3rem;
color: white;
}
.subheading {
font-size: 1.5rem;
}
/*Training Units page*/
.jumbotron {
background: url("../img/elearning-wide.png") no-repeat #ddd6fe;
background-size: contain;
background-position: center;
padding-top: 2rem;
padding-bottom: 2rem;
margin-bottom: 0;
border-radius: 25px;
height: 40vh;
}
.jumbotron p:last-child {
margin-bottom: 0;
}
.choice-btn {
width: 5rem;
}
@media (max-width: 991px) {
.jumbotron {
background: url("../img/elearning.png") 55% 80% no-repeat #ddd6fe;
background-size: contain;
border: 4px solid #593196;
border-radius: 12px;
padding-top: 3rem;
padding-bottom: 3rem;
padding-right: 1rem;
padding-left: 1rem;
height: 30vh;
}
}
/*Wider screened smartphones*/
@media (max-width: 414px) {
}
/*Normal screened smartphones*/
@media (max-width: 375px) {
}
/*Smaller screened smartphones:*/
@media (max-width: 320px) {
}
我已经尝试了我认为是 z-index 和 overflow-y 的所有可能组合，我已经尝试按照其他答案中的说明缩放页面，现在我完全被我所有的东西难住了研究无果。
当心：使用括号编辑器的实时视图时，它似乎确实在滚动.
如果有人能阐明为什么这可能开始发生，并可能引导我摆脱我造成的混乱，并找到一种更可靠的方式来实现我想要的，我将非常感激重新：滚动页面的中间部分（顶部导航栏和页脚之间）。
编辑：完整（清除）tailwind.css here 如果你需要的话。
找到解决方法。将 transform: translateZ(0) 添加到我的主要内容会将用户输入设置为该内容，我可以再次滚动。