如何将HTML元素移出屏幕且不改变屏幕尺寸、不出现滚动条？

你的代码里用了float: right，浮动元素仍会占据文档流的水平空间，再加上transform: translateX(50px)把灰色div向右偏移，两个元素的总宽度超出了视口，所以浏览器出现了水平滚动条。下面是几种可行的解决方法：

方法一：直接隐藏水平溢出 #

给body添加overflow-x: hidden，让浏览器直接裁切掉超出视口的水平内容，简单粗暴：

<!DOCTYPE html>
<html lang="en">
<head></head>
<body style="margin: 0px; overflow-x: hidden;">
    <div style="height: 100px; width: 1000px; background-color: black; float: right;"></div>
    <div style="height: 100px; width: 1000px; background-color: gray; float: right; transform: translateX(50px);"></div>
</body>
</html>

注意：如果页面其他区域有需要显示的水平滚动内容，这个方法会把它们一起隐藏，按需使用。

方法二：用绝对定位替代浮动 #

绝对定位的元素脱离文档流，不会撑大父容器的宽度，能精准控制元素位置且不影响布局：

<!DOCTYPE html>
<html lang="en">
<head></head>
<body style="margin: 0px; position: relative;">
    <div style="height: 100px; width: 1000px; background-color: black; position: absolute; right: 0;"></div>
    <div style="height: 100px; width: 1000px; background-color: gray; position: absolute; right: -50px;"></div>
</body>
</html>

这里直接给灰色div设置right: -50px，就能让它向右偏移50px且不会触发滚动条。

方法三：用固定定位彻底移出视口 #

如果只是单纯要把元素藏到屏幕外且不想它影响任何布局，用position: fixed配合负偏移更合适，元素完全脱离文档流，也不会随页面滚动：

<!DOCTYPE html>
<html lang="en">
<head></head>
<body style="margin: 0px;">
    <div style="height: 100px; width: 1000px; background-color: black; float: right;"></div>
    <div style="height: 100px; width: 1000px; background-color: gray; position: fixed; right: -1050px;"></div>
</body>
</html>

这里right: -1050px等于元素宽度+偏移量，确保整个元素都在视口右侧之外。

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