如何禁用元素宽度超出视口宽度时的横向滚动并保留裁切效果

问题根因 #

代码的核心问题有三个：

• 浏览器默认给body设置了margin: 8px的默认样式，会额外撑大页面可视范围
• 绝对定位元素脱离普通文档流，父元素html上设置的flex居中规则对它完全不生效，导致圆形位置偏移
• 没有限制根元素的溢出行为，圆形尺寸大于视口对应方向尺寸时，默认会触发滚动条

修复方案 #

直接使用以下修改后的代码即可实现需求，既保留两侧裁切的效果，也不会出现多余滚动条：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    html {
      height: 100vh;
      width: 100vw;
      background-color: white;
      overflow: hidden;
    }
    
    body {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: 70vh;
      width: 70vh;
      background-color: deeppink;
      border-radius: 50%;
    }
    @media (orientation:landscape){
      body{
        height:70vw;
        width:70vw;
      }
    }
  </style>
</head>
<body></body>
</html>

修改说明 #

• 新增全局样式重置，消除浏览器默认边距、盒模型差异带来的影响
• 给html添加overflow: hidden规则，超出视口的内容直接裁切，不会触发滚动条
• 改用top: 50%+left:50%+transform: translate(-50%,-50%)的方案实现圆形的绝对居中，保证裁切区域均匀分布在视口两侧/上下，符合预期效果
• 给html补充width: 100vw规则，避免部分浏览器宽度计算异常

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