原生date类型输入框不识别scroll-margin CSS属性问题求解

这个问题的本质是input[type=date]这类输入框内部由浏览器维护了独立的Shadow DOM结构，触发表单校验时，浏览器的自动滚动是定位到Shadow DOM内部的输入控件元素，而非你页面中声明的input元素，因此你给外层input设置的scroll-margin属性不会被识别，导致滚动定位偏移，属于浏览器原生实现的兼容性差异。

以下两种方案都不需要引入jQuery即可解决：

方案1：全局滚动内边距配置（纯CSS，优先推荐） #

给页面根滚动容器设置scroll-padding-top，这个属性会作用于所有浏览器原生触发的滚动行为（包括校验定位、锚点跳转、内置控件滚动等），对所有类型输入框都生效，不需要单独给每个元素配置：

/* 新增该全局规则即可，原有scroll-margin规则可保留兼容其他场景 */
:root {
  scroll-padding-top: 150px;
}

该方案改造成本极低，覆盖Chrome、Firefox、Safari 15+所有主流现代浏览器。

方案2：手动接管校验滚动（JS兜底，适配复杂布局） #

如果你的页面存在多个滚动容器，全局scroll-padding不适用的情况下，可以监听表单的invalid事件，手动控制滚动位置：

const FIXED_HEADER_HEIGHT = 150;
// 可修改选择器仅绑定需要处理的表单
document.querySelectorAll('form').forEach(form => {
  form.addEventListener('invalid', (e) => {
    // 阻止浏览器默认的滚动行为
    e.preventDefault();
    // 计算目标输入框的实际页面位置，扣除固定头部高度后滚动
    const targetInput = e.target;
    const inputOffsetTop = targetInput.getBoundingClientRect().top + window.scrollY;
    window.scrollTo({
      top: inputOffsetTop - FIXED_HEADER_HEIGHT,
      behavior: 'smooth' // 不需要平滑滚动可删除该行
    });
    // 可选：手动唤起原生校验报错提示
    targetInput.reportValidity();
  }, true); // 捕获模式确保我们的逻辑优先于浏览器默认行为执行
});

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