ScrollIntoView 打破溢出滚动 [英] ScrollIntoView breaks the overflow scroll

问题描述

我有一个嵌套的子容器，当我尝试 scrollIntoView 时，它破坏了父容器.我不明白为什么它会这样.请帮我解决这个问题.
请查看下面或 jsfiddle

上的代码

function moveToTop() {console.log('移动到顶部::');const child = document.getElementById('child');child.scrollIntoView({行为:平稳"});}

#parent {背景颜色:蓝色；填充:10px；高度:500px；溢出:隐藏；显示:弹性；弹性方向:列；}#scroller {溢出:自动；填充:10px；背景颜色:红色；弹性增长:1;}#孩子 {高度:10000px；背景颜色:绿色；}身体 {溢出:隐藏；颜色:#fff;字体粗细:粗体；}按钮 {位置:固定；底部:20px；宽度:140px；左:20%；右:0；}

家长<div id="something">Something</div><div id="滚动条">孩子<div id="孩子">大孩子<button onclick="moveToTop()">Top</button>

解决方案

整个问题在于 scrollIntoView() 正在移动 窗口.但是由于 #parent 溢出是隐藏的，当窗口移动时，这个元素本身就会中断.我可以建议为 #parent 设置一个 position: fixed，这将解决您的问题，但通常会损害布局.

使用 scroll() 方法.滚动机制本身是:

scroller.scroll(0, child.offsetTop - 55);

child.offsetTop - 顶部元素；

55 - 从 #parent 顶部到 #scroller 顶部的距离.

过渡动画必须在选择器#scroller中设置为css.像这样:

#scroller {...滚动行为:平滑；}

function moveToTop() {console.log('移动到顶部::');const child = document.getElementById('child');const scroller = document.getElementById('scroller');scroller.scroll(0, child.offsetTop - 55);}

#parent {背景颜色:蓝色；填充:10px；高度:500px；溢出:隐藏；显示:弹性；弹性方向:列；}#scroller {溢出:自动；填充:10px；背景颜色:红色；弹性增长:1；滚动行为:平滑；}#孩子 {高度:10000px；背景颜色:绿色；}身体 {溢出:隐藏；颜色:#fff;字体粗细:粗体；}按钮 {位置:固定；底部:20px；宽度:140px；左:20%；右:0；}

家长<div id="something">Something</div><div id="滚动条">孩子<div id="孩子">大孩子<button onclick="moveToTop()">Top</button>

I have a nested child container and when I'm trying to scrollIntoView it breaks the parent container. I'm not able to understand why it's acting like this. Please help me out in this.
Please have a look at the code below or on jsfiddle

function moveToTop() {
  console.log('MOVE TO TOP::');
  const child = document.getElementById('child');
  child.scrollIntoView({
    behavior: "smooth"
  });
}

#parent {
  background-color: blue;
  padding: 10px;
  height: 500px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#scroller {
  overflow: auto;
  padding: 10px;
  background-color: red;
  flex-grow: 1;
}

#child {
  height: 10000px;
  background-color: green;
}

body {
  overflow: hidden;
  color: #fff;
  font-weight: bold;
}

button {
  position: fixed;
  bottom: 20px;
  width: 140px;
  left: 20%;
  right: 0;
}

<div id="parent">
  PARENT
  <div id="something">Something</div>
  <div id="scroller">
    CHILD
    <div id="child">
      GRAND CHILD
      <button onclick="moveToTop()">Top</button>
    </div>
  </div>
</div>

解决方案

The whole problem is that scrollIntoView() is moving the window. But since the #parent overflow is hidden, when the window is moved, this element itself breaks. I could suggest setting a position: fixed for the #parent, which will solve your problem, but it can harm the layout in general.

Use the scroll() method. The scrolling mechanism itself is:

scroller.scroll(0, child.offsetTop - 55);

child.offsetTop - top element;

55 - distance from the top of the #parent to the top #scroller.

The transition animation must be set to css, in selector #scroller. Like that:

#scroller {
  ...
  scroll-behavior: smooth;
}

function moveToTop() {
  console.log('MOVE TO TOP::');
  const child = document.getElementById('child');
  const scroller = document.getElementById('scroller');
  scroller.scroll(0, child.offsetTop - 55);
}

#parent {
  background-color: blue;
  padding: 10px;
  height: 500px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#scroller {
  overflow: auto;
  padding: 10px;
  background-color: red;
  flex-grow: 1;
  scroll-behavior: smooth;
}

#child {
  height: 10000px;
  background-color: green;
}

body {
  overflow: hidden;
  color: #fff;
  font-weight: bold;
}

button {
  position: fixed;
  bottom: 20px;
  width: 140px;
  left: 20%;
  right: 0;
}

<div id="parent">
  PARENT
  <div id="something">Something</div>
  <div id="scroller">
    CHILD
    <div id="child">
      GRAND CHILD
      <button onclick="moveToTop()">Top</button>
    </div>
  </div>
</div>

这篇关于ScrollIntoView 打破溢出滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！