在窗口边缘稍微旋转一个 div，没有出现水平滚动条

Question

在页面顶部，我创建了四个框/图块，它们在悬停时略微旋转(5度旋转(。这些框通过flexbox进行定位和调整大小，以跨越窗口的整个宽度。将鼠标悬停在最右侧的框上时，其右下角会移出右侧的窗口，从而导致出现水平滚动条。

我想避免出现滚动条。我尝试通过为包含框的<div>设置display: none来执行此操作，但这通常会干扰显示框的旋转，因为它会在旋转时在div 的边界处切断它们。我想保持盒子旋转的效果完全可见，同时避免水平滚动条。

这是我的html和css以及页面的jsfiddle(请注意，水平滚动条并不总是出现在jsfiddle中，具体取决于运行代码的窗口的大小(：

.banner {
margin: 0px;
font-size: 10vw;
line-height: 1.2;

overflow-x: hidden;
}
.flex {
display: flex;
}
.row {
flex-direction: row;
justify-content: space-between;
}
.box {
flex: 1;
text-align: center;
border: 1px solid black;
background-color: white;
box-sizing: border-box;
cursor: default;
}
.rotate-right {
transition: all 400ms ease;
}
.rotate-left {
transition: all 400ms ease;
}
.rotate-right:hover {
transform: rotate(5deg);
}
.rotate-left:hover {
transform: rotate(-5deg);
}

<div class="top" id="top">
<div>
<div class="flex row banner">
<div class="box rotate-right">
<p>
1
</p>
</div>
<div class="box rotate-left">
<p>
2
</p>
</div>
<div class="box rotate-right">
<p>
3
</p>
</div>
<div class="box rotate-left">
<p>
4
</p>
</div>
</div>
</div>
</div>

Answer 1

为您的body添加overflow-x: hidden。演示：

body {
overflow-x: hidden;
}
* {
font-size: 6vw;
}
.flex {
display: flex;
}
.row {
flex-direction: row;
justify-content: space-between;
}
.box {
flex: 1;
text-align: center;
border: 1px solid black;
background-color: white;
box-sizing: border-box;
cursor: default;
}
.rotate-right {
transition: all 400ms ease;
}
.rotate-left {
transition: all 400ms ease;
}
.rotate-right:hover {
transform: rotate(5deg);
}
.rotate-left:hover {
transform: rotate(-5deg);
}

<div class="top" id="top">
<div>
<div class="flex row banner">
<div class="box rotate-right">
<p>
1
</p>
</div>
<div class="box rotate-left">
<p>
2
</p>
</div>
<div class="box rotate-right">
<p>
3
</p>
</div>
<div class="box rotate-left">
<p>
4
</p>
</div>
</div>
</div>
</div>

Answer 2

在你的类名中使用此命令，如果它是span，那么像这样使用

铬

.span {

&::-webkit-scrollbar{
display: none;
}

}

火狐浏览器

.span{

scrollbar-width: none;

}