Chrome 中的奇怪滚动问题无法使用鼠标滚轮滚动

问题描述

我做了一些事情（我显然不知道是什么），导致在我网站的单个页面上的 Google Chrome 桌面浏览器上滚动出错。我正在使用html模板（Django），但是当我构建一个完整的网页时仍然会出现问题，如下所示。另外值得注意的是，我使用的是 tailwindcss，但这似乎与问题没有直接关系。

奇怪的是，鼠标滚轮在 Firefox 和移动设备上都有效，甚至可以按 Page Down/Up、拖动滚动条和选择文本在桌面上按预期工作，而不是鼠标滚轮。我在这里搜索过类似的问题，但我发现的问题对我来说没有用。

我相信问题围绕着一个设置为 overflow-y: auto 的包装元素，并且具有 3px 的透视图和一些视差部分。（但是，删除此属性似乎对该问题没有影响。）具有完全相同的包装元素但没有视差部分的另一个页面没有相同的问题，因此它似乎不是包装器本身。以下是完整的模板：

<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 &copy; 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;
}

以防万一，这是我的 tailwindcss 源 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 的所有可能组合，我已经尝试像其他答案中所说的那样缩放页面，现在我完全被我所有的研究难住了一无所有。

注意：使用 Brackets Editor 的实时视图时它似乎确实会滚动，但我认为这是因为它更多地将页面视为单独的元素，如果有意义的话，可以在选择相关代码时滚动到视图中。

如果有人能解释为什么会开始发生这种情况，我将非常感激，并可能引导我摆脱我造成的混乱，并朝着更可靠的方式实现我想要的：滚动中间部分页面（在顶部导航栏和页脚之间）。

编辑：完整（清除）tailwind.css here（如果需要）。

解决方法

找到了解决方法。将 transform: translateZ(0) 添加到我的主要内容会将用户输入设置为该内容，然后我可以再次滚动。

google-chrome html mousewheel scroll scroll scroll sticky-footer

Chrome 中的奇怪滚动问题无法使用鼠标滚轮滚动

问题描述

解决方法

相关问答