部分关闭屏幕 div 不会向屏幕添加水平滚动

Question

/* body{
    overflow-x: hidden;
} */
.divOne{
    /* overflow-y: hidden; */
    position: relative;
    background-color: aqua;
    height: 100px;
    width: 100%;
}
.divTwo{
    background-color: red;
    height: 300px;
    width: 300px;
    position: absolute;
    top: -30px;
    right: -80px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./index.css" />

    <title>learning about canvas</title>
  </head>
  <body>
    <div class="container-div">
      <div class="divOne">div1</div>
      <div class="divTwo">div2</div>
    </div>
  </body>
</html>

我想让水平滚动条不出现在下方。我想让 overflowing 2 div overflow: hidden 。但是 overflow : hidden 仅在应用于 body 时才起作用，这会导致很多问题。

Answer 1

您需要为 container-div 添加绝对定位规则 class，为 body 标签添加相对定位，使用 overflow-x: hidden 规则。

现在你的方块.divTwo隐藏在查看区，我的宽度是300x300。

body {
    position: relative;
    overflow-x: hidden;
}

.container-div {
    position: absolute;
    left: 0;
    right: 0;
}

.divOne{
    /* overflow-y: hidden; */
    background-color: aqua;
    height: 100px;
    width: 100%;
}
.divTwo{
    background-color: red;
    height: 300px;
    width: 300px;
    position: absolute;
    top: -30px;
    right: -80px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./index.css" />

    <title>learning about canvas</title>
  </head>
  <body>
    <div class="container-div">
      <div class="divOne">div1</div>
      <div class="divTwo">div2</div>
    </div>
  </body>
</html>

部分关闭屏幕 div 不会向屏幕添加水平滚动

Make partially off screen div which will not add horizontal scroll to the screen

html

css

overflow