图片设置负right值位于右侧时如何去除水平滚动条（不使用overflow:hidden）

问题原因 #

浏览器默认计算水平滚动范围时，仅会将元素超出视口右边界的部分计入可滚动区域，超出视口左边界的部分不会触发水平滚动条。
你设置left: -80px时，伪元素向左偏移超出父容器，超出部分落在视口左侧，不会触发滚动；而设置right: -80px时，伪元素向右偏移超出父容器，超出部分落在视口右侧，就会触发水平滚动条。

解决方案（无需设置overflow:hidden） #

方案1：用left+calc替代right属性 #

直接用left: calc(100% - 80px)完全等效于right: -80px的定位效果，同时因为基于left属性定位，超出部分落在视口左侧，不会触发滚动条。
修改后的CSS代码如下：

* {
  margin: 0;
  padding: 0;
}
div {
  margin: 100px auto;
  border: 1px solid gray;
  width: 500px;
  position: relative;
}
.bg-img::before {
  content: "";
  position: absolute;
  width: 160px;
  height: 110px;
  z-index: -1;
  top: -50px;
  left: calc(100% - 80px); /* 等效于right: -80px，不会触发滚动条 */
  background-image: url(https://i.ibb.co/Qdz79gF/Sample.png);
  background-size: 100% 100%;
}

对应HTML代码保持不变：

<div class="bg-img">
  This is some text<br>
  This is some text<br>
  This is some text<br>
  This is some text<br>
  This is some text
</div>

方案2：用transform偏移实现 #

如果需要保留right属性，可以结合transform实现偏移，transform的位移不会被计入盒模型的尺寸计算，也不会触发滚动条：

.bg-img::before {
  content: "";
  position: absolute;
  width: 160px;
  height: 110px;
  z-index: -1;
  top: -50px;
  right: 0;
  transform: translateX(80px); /* 向右偏移80px，等效于right:-80px，不会触发滚动 */
  background-image: url(https://i.ibb.co/Qdz79gF/Sample.png);
  background-size: 100% 100%;
}

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