Chrome：CSS`translatex`在锚标签上重置单击

发布于 2025-02-09 01:21:07 字数 2429 浏览 1 评论 0原文

我有一个长长的单页网站，其中包含许多内容部分。

左侧有一个菜单，可以用动画打开，并且打开时，它将内容部分与右边的交换转移到右侧，因此菜单不涵盖内容。

当我单击菜单项时，它会通过本机锚标记（＆lt; a href =“＃extart1”＆gt;第1节＆lt;/a＆gt;）滚动到该部分

。单击translatex用于截面 - wrapper重置的情况下，无需更改CSS。查看DevTools中元素的计算样式，它没有任何更改。

See video here: https://twitter.com/MartinHN/status/1538969557930491910

Minimal example here ：

html {
  scroll-behavior: smooth;
  scroll-padding-top: 74px;
}

.menu {
  position: fixed;
  background: green;
  padding: 20px;
  z-index: 999;
}

.section {
  min-height: 400px;
  margin: 20px;
  background: red;
}

.wrapper {
  -webkit-transition: 0.5s cubic-bezier(0.66, 0, 0, 0.88);
  -moz-transition: 0.5s cubic-bezier(0.66, 0, 0, 0.88);
  -o-transition: 0.5s cubic-bezier(0.66, 0, 0, 0.88);
  transition: 0.5s cubic-bezier(0.66, 0, 0, 0.88);
}

body.menu-open .wrapper {
  transform: translateX(95px);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body class="menu-open">
  <div class="menu">
  <a href="#test1">test1</a>
  <a href="#test2">test2</a>
  </div>
  <div class="wrapper">
  <br />  <br />  <br />  
  
  <div class="section" id="test1">test1</div>
  
    <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />
    <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />

  <div class="section" id="test2">test2</div>
  </div>
</body>
</html>

请参阅JS bin：

原文

I have a long, single-page site with many content sections.

There's a menu on the left that opens up with an animation, and when open it shifts the content section-wrapper to the right, so that the menu doesn't cover the content.

When I click a menu item, it scrolls to that section via native anchor tag (<a href="#section1">Section 1</a>)

The anchor tag navigation works fine, but when clicked the translateX for the section-wrapper resets with no changes in the CSS applied. Looking at the computed styles for the element in DevTools, it has no changes.

See video here: https://twitter.com/MartinHN/status/1538969557930491910

Minimal example here:

html {
  scroll-behavior: smooth;
  scroll-padding-top: 74px;
}

.menu {
  position: fixed;
  background: green;
  padding: 20px;
  z-index: 999;
}

.section {
  min-height: 400px;
  margin: 20px;
  background: red;
}

.wrapper {
  -webkit-transition: 0.5s cubic-bezier(0.66, 0, 0, 0.88);
  -moz-transition: 0.5s cubic-bezier(0.66, 0, 0, 0.88);
  -o-transition: 0.5s cubic-bezier(0.66, 0, 0, 0.88);
  transition: 0.5s cubic-bezier(0.66, 0, 0, 0.88);
}

body.menu-open .wrapper {
  transform: translateX(95px);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body class="menu-open">
  <div class="menu">
  <a href="#test1">test1</a>
  <a href="#test2">test2</a>
  </div>
  <div class="wrapper">
  <br />  <br />  <br />  
  
  <div class="section" id="test1">test1</div>
  
    <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />
    <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />

  <div class="section" id="test2">test2</div>
  </div>
</body>
</html>

See on JS Bin: https://jsbin.com/cafedesija/1/edit?html,css,output

It works as expected in Safari, but in Chrome/Brave it doesn't maintain the transform when clicking the test1 and test2 links.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

心欲静而疯不止 2025-02-16 01:21:07

根据示例，一切都“正确地”起作用，这种行为不仅在基于铬的浏览器中，而且在Firefox中。该示例表明，当您进行变换时：Translatex（）在内部元素上时，该页面可能具有水平滚动条。因此，当您遵循链接时，浏览器滚动不仅滚动垂直滚动，还会滚动水平滚动。

如果您不更改HTML结构，则可以在滚动 - car-margin-Left 。例如，在您的情况下，具有卷轴 - 边缘左侧的值：99999px，当在锚点上滚动时，您可以将水平滚动固定到左侧。请参阅下面的示例：

html {
  scroll-behavior: smooth;
  scroll-padding-top: 74px;
}

.menu {
  position: fixed;
  background: green;
  padding: 20px;
  z-index: 999;
}

.section {
  min-height: 400px;
  margin: 20px;
  background: red;
  scroll-margin-left: 99999px;
}

.wrapper {
  -webkit-transition: 0.5s cubic-bezier(0.66, 0, 0, 0.88);
  -moz-transition: 0.5s cubic-bezier(0.66, 0, 0, 0.88);
  -o-transition: 0.5s cubic-bezier(0.66, 0, 0, 0.88);
  transition: 0.5s cubic-bezier(0.66, 0, 0, 0.88);
}

body.menu-open .wrapper {
  transform: translateX(95px);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body class="menu-open">
  <div class="menu">
  <a href="#test1">test1</a>
  <a href="#test2">test2</a>
  </div>
  <div class="wrapper">
  <br />  <br />  <br />  
  
  <div class="section" id="test1">test1</div>
  
    <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />
    <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />

  <div class="section" id="test2">test2</div>
  </div>
</body>
</html>

According to the example, everything works quite "correctly" and this behavior is not only in Chromium-based browsers but also in Firefox. The example shows that when you do transform: translateX() on the inner element, the page may have a horizontal scrollbar. Accordingly, when you follow the link, the browser scrolls not only the vertical scroll, but also the horizontal one.

If you do not change the HTML structure, then a similar problem can be solved with the help of scroll-margin-left. For example, in your case, with a value of scroll-margin-left: 99999px you can fix the horizontal scroll to the left side, when scrolling on the anchor. See example below:

html {
  scroll-behavior: smooth;
  scroll-padding-top: 74px;
}

.menu {
  position: fixed;
  background: green;
  padding: 20px;
  z-index: 999;
}

.section {
  min-height: 400px;
  margin: 20px;
  background: red;
  scroll-margin-left: 99999px;
}

.wrapper {
  -webkit-transition: 0.5s cubic-bezier(0.66, 0, 0, 0.88);
  -moz-transition: 0.5s cubic-bezier(0.66, 0, 0, 0.88);
  -o-transition: 0.5s cubic-bezier(0.66, 0, 0, 0.88);
  transition: 0.5s cubic-bezier(0.66, 0, 0, 0.88);
}

body.menu-open .wrapper {
  transform: translateX(95px);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body class="menu-open">
  <div class="menu">
  <a href="#test1">test1</a>
  <a href="#test2">test2</a>
  </div>
  <div class="wrapper">
  <br />  <br />  <br />  
  
  <div class="section" id="test1">test1</div>
  
    <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />
    <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />

  <div class="section" id="test2">test2</div>
  </div>
</body>
</html>

回复收藏 0 原文

~没有更多了~