时间戳

首页 > 解决方案 > 为什么在基于 Chromium 的浏览器中的 html 元素及其后代中都存在“滚动行为：平滑”？

html - 为什么在基于 Chromium 的浏览器中的 html 元素及其后代中都存在“滚动行为：平滑”？

问题描述

在桌面和移动设备上使用基于 Chromium 的浏览器（即 Google Chrome、Opera、Edge 等）查看时，我的页面上出现了一个奇怪的问题。我在页面上的部分有 HTML 导航书签。在每个部分中都有一个水平滚动的照片库（flex-container），其中包含指向画廊容器内每张照片的 HTML 导航书签。我同时设置scroll-behavior: smooth;了html元素和 flex-container，以便页面在垂直（整个页面）和水平（在每个 flex-container 内）都平​​滑滚动。

这导致 HTML 书签根本无法水平滚动图库（除非视口与 flex-container 不齐）。Firefox 或 Safari 中不存在此问题。

以下是异常行为的最小示例：

html {
  /* having `scroll-behavior: smooth;` here BRAKES THE CODE! */
  scroll-behavior: smooth;
}


.wrapper {
  /* dummy height to simulate further content */
  height: 200vh;
}

.container {
  scroll-behavior: smooth;
  display: flex;
  height: 300px;
  overflow-x: auto;
}

.container img {
  /* making images fit nicely in flex-container */
  max-height: 100%;
  object-fit: contain;
}
<body>
  <div class="logo">
    <h1 class="logo-text">This is the page title</h1>
  </div>
  <div class="wrapper">
    <div class="container">
      <img src="https://source.unsplash.com/random/1" id="img1-1">
      <img src="https://source.unsplash.com/random/2" id="img1-2">
      <img src="https://source.unsplash.com/random/3" id="img1-3">
      <img src="https://source.unsplash.com/random/4" id="img1-4">
      <img src="https://source.unsplash.com/random/5" id="img1-5">
      <img src="https://source.unsplash.com/random/7" id="img1-6">
      <img src="https://source.unsplash.com/random/8" id="img1-7">
      <img src="https://source.unsplash.com/random/9" id="img1-8">
      <img src="https://source.unsplash.com/random/10" id="img1-9">
      <img src="https://source.unsplash.com/random/11" id="img1-10">
      <img src="https://source.unsplash.com/random/12" id="img1-11">
    </div>
    <nav class="container-nav">
      <ol>
        <li><a href=#img1-1>Photo 1</i></a></li>
        <li><a href=#img1-2>Photo 2</i></a></li>
        <li><a href=#img1-3>Photo 3</i></a></li>
        <li><a href=#img1-4>Photo 4</i></a></li>
        <li><a href=#img1-5>Photo 5</i></a></li>
        <li><a href=#img1-6>Photo 6</i></a></li>
        <li><a href=#img1-7>Photo 7</i></a></li>
        <li><a href=#img1-8>Photo 8</i></a></li>
        <li><a href=#img1-9>Photo 9</i></a></li>
        <li><a href=#img1-10>Photo 10</i></a></li>
        <li><a href=#img1-11>Photo 11</i></a></li>
      </ol>
    </nav>
  </div>
</body>

从 html 元素中删除scroll-behavior: smooth;解决了这个问题，但是，我希望在 html 元素和 flex-container 上都平滑滚动。我能够使用 JavaScript 通过动态添加和删除 html 元素上的 来解决这个问题scroll-behavior: smooth;，具体取决于单击的超链接类型。

我很好奇这是否只是 Chromium 浏览器中的一个错误，还是我做错了什么，不了解某个方面是如何工作的？

这是我在 StackOverflow 上的第一个问题，所以如果有什么我可以改进或更清楚的地方，请告诉我。

标签： htmlcssflexboxchromium

解决方案

推荐阅读