Chrome系浏览器中textarea的scroll-margin-top属性失效问题求助

问题 #

页面设置了固定导航栏，通过scroll-margin-top属性避免锚点跳转目标被导航栏遮挡。该属性对大部分元素生效，但在Chrome系浏览器（Edge、Chrome、Electron）的<textarea>元素上失效，Linux和Windows系统下的Cypress+Electron自动化测试场景中均存在此问题，Firefox及Cypress+Firefox环境下表现正常。

示例代码如下：

CSS代码 #

body {
  margin: 0;
  padding: 0;
}

* {
  scroll-margin-top: 6rem;
}

nav {
  background-color: rgb(255, 0, 0);
  top: 0;
  position: fixed;
  width: 100%;
  display: block;
  padding: 1em;
}

li {
  display: inline-block;
  margin-right: 2em;
}

a {
  color: white;
}

section {
  margin-top: 5rem;
  padding: 1em;
}

.filler {
  height: 1000px;
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>scroll-margin-top</title>
</head>

<body>
  <nav>
    <ul>
      <li><a href="#h1">H1</a></li>
      <li><a href="#text">text</a></li>
      <li><a href="#textarea">textarea</a></li>
      <li><a href="#textarea_wrapper">textarea_wrapper</a></li>
    </ul>
  </nav>
  <section>
    <p>Try this in Firefox and chrome based browsers. "textarea" has issues in chrome based browsers</p>
    <h1 id="h1">H1 heading</h1>
    <p>Any text</p>
    <input type="text" id="text" value="text" />
    <p>Any text</p>
    <span id="textarea_wrapper">
        <textarea id="textarea">Textarea</textarea>
      </span>
    <p class="filler">Filler</p>
  </section>
</body>

</html>

回答 #

这是Chrome的bug吗？ #

是的，这属于Chrome系浏览器的已知兼容性问题。Chrome内核对<textarea>这类可交互表单元素的滚动锚点计算逻辑存在偏差，导致scroll-margin-top属性未被正确应用，而Firefox的实现符合预期。

解决办法 #

通用浏览器场景

• 给父容器设置属性：不给<textarea>直接设置scroll-margin-top，转而给它的父容器（如示例中的#textarea_wrapper）设置该属性，同时确保父容器为块级元素（添加display: block样式）。
• 改用scroll-padding-top：给滚动容器（通常是html和body）设置scroll-padding-top: 6rem，该属性作用于容器本身，会为所有锚点跳转统一预留顶部间距，对<textarea>同样生效。修改后的核心CSS如下：

html, body {
  scroll-padding-top: 6rem;
  margin: 0;
  padding: 0;
}

/* 移除原*选择器的scroll-margin-top */
/* * {
  scroll-margin-top: 6rem;
} */

Cypress测试场景专属方案

如果通用方案不适用，可通过Cypress API手动控制滚动位置：

1. 点击锚点后手动计算并调整滚动距离：

cy.get('a[href="#textarea"]').click().then(() => {
  cy.get('#textarea').then($el => {
    const navHeight = 80; // 替换为实际导航栏高度
    const elementTop = $el.offset().top;
    cy.window().scrollTo(0, elementTop - navHeight);
  });
});

2. 覆盖锚点默认行为，直接调用滚动方法：

cy.get('a[href="#textarea"]')
  .invoke('removeAttr', 'href')
  .click()
  .then(() => {
    cy.get('#textarea').scrollIntoView({ offset: { top: -80 } }); // offset值为导航栏高度的负数
  });

内容的提问来源于stack exchange，提问作者arnep