Question

我在另一个div（外部）中有一个居中的div（内部）。如果内部div大于外部div我想让滚动条滚动到元素的顶部或底部。可悲的是，我无法完全滚动到顶部。我认为这是由变换引起的：翻译技巧。

.outer {
    overflow: scroll;
    width:100%;
    height:100%;
    position:relative;
}

.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    
    
    background-color:red;
    overflow:hidden;
}

/* normalize */
body,html{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}

<div class="outer">
  <div class="inner" style="width: 100px; height: 800px;">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>

我使用内联样式作为内部div的宽度和高度，因为我会动态地用js更改它。

在here之前询问了这个问题。但没有人理解他想要做什么。

Answer 1

也许您应该尝试自动而不是隐藏，并根据这一点更改您的代码：

.outer {
  overflow: scroll;
  width: 100%;
  height: 100%;
  position: relative;
}

.inner {
  background-color: red;
  overflow: auto;
}


/* normalize */

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

<div class="outer">
  <div class="inner" style="width: 100px; height: 800px;">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>

我基本上删除了你的position属性，使内部div从外部div继承它。另外，我删除了你的转换属性，因为你不一定需要它。

我希望这会有所帮助！

Answer 2

＆＃13;

.outer {
    overflow: scroll;
    width:100%;
    height:100%;
    position:relative;
}

.inner {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    background-color:red;
    overflow:hidden;
}

/* normalize */
body,html{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}

＆＃13;

<div class="outer">
  <div class="inner" style="width: 100px; height: 800px;">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>

＆＃13;

请删除转换css，因为它正在发送内容-50％的开箱即用，您可以使用

left: 0;
right: 0;
margin: auto;

使位置居中：绝对不需要使用左边的内容：50％

居中的div没有正确溢出

2 个答案: