如何在屏幕右上角放置响应式四分之一圆并解决水平滚动问题

API 探路者

2026-6-23

实现右上角四分之一响应式圆形（无水平滚动）

你的代码出现水平滚动的原因是：固定定位的圆形元素虽通过transform移动，但元素本身的占位范围仍会被浏览器计算，从而触发水平滚动条。下面是两种可行的修复方案：

方案一：通过定位偏移隐藏多余部分（无需全局隐藏滚动）

直接将圆形的中心对齐视口右上角，只让四分之一部分显示在屏幕内，同时不会触发滚动：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.circle {
  width: 50vw;
  height: 50vw;
  max-width: 500px;
  max-height: 500px;
  border-radius: 50%;
  background-color: greenyellow;
  position: fixed;
  /* 将圆形中心定位在视口右上角 */
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}

<div class="circle"></div>

说明：transform: translate(50%, -50%) 让圆形的中心与视口右上角重合，此时屏幕内只会显示圆形的左上四分之一区域，正好位于屏幕右上角；固定定位的元素不会占用文档流空间，也不会触发水平滚动。

方案二：通过负边距直接将多余部分移出视口

直接把圆形的大部分区域移到视口外，只保留右上角的四分之一：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.circle {
  width: 50vw;
  height: 50vw;
  max-width: 500px;
  max-height: 500px;
  border-radius: 50%;
  background-color: greenyellow;
  position: fixed;
  /* 将圆形的右上部分留在视口内，其余移出 */
  top: -25vw;
  right: -25vw;
  /* 配合max-width/max-height设置最大偏移量 */
  margin-top: -250px;
  margin-right: -250px;
}