html - 在 Chrome 中其他 flex 元素更改大小后，Div flex 元素滚动到顶部

Question

如标题所述，我的网站上有一个 flex 布局。

我的左侧有一个菜单栏，您可以将其隐藏。通过 css-transitions 这看起来确实很流畅。问题是它的 div 权利。由于 flex 布局，当我隐藏菜单栏时它必须调整大小。 div 是可滚动的。

现在，如果我隐藏或显示菜单栏，它右侧的 div 会将其滚动偏移重置为零。这似乎只是在 Chrome 中的情况。在 Firefox、Edge 和 IE 中(尽管 IE 有其他问题)是否可以正常工作。

如果我关闭菜单栏的 css 过渡，它确实可以正常工作，但我想要过渡。

当我使用动画而不是过渡时它不起作用。

我尝试用 JavaScript 做一个肮脏的修复，将每毫秒的滚动偏移设置为一个固定值，但它所做的只是非常快地在两个滚动位置之间跳转......

知道如何解决这个问题或可能是什么原因吗？

最后的最小示例。

编辑:我的猜测是 div 以某种方式重新加载，但似乎并非如此。当 div 跳回顶部时会触发滚动事件...不幸的是，此事件无法取消。通过此事件重置滚动位置也很不稳定。

Opera 显示相同的问题。

var menuIsToggled = true;

function toggleMenu() {
  if (menuIsToggled) {
    document.getElementById('left').style.width = '0px';
  } else {
    document.getElementById('left').setAttribute('style', '');
  }
  menuIsToggled = !menuIsToggled;
}

function countScrolls(){
  var e = document.getElementById('scrollCount');
  e.innerHTML++;
}

var transIsToggled = true;
function toggleTrans(bt){
  if(transIsToggled){
    document.getElementById('left').className = "";
    bt.innerHTML = "Turn on transition";
  }
  else{
    document.getElementById('left').className = "trans";
    bt.innerHTML = "Turn off transition";
  }
  transIsToggled = !transIsToggled;
}

div {
  overflow: hidden;
}
#body {
  height: 300px
}
#left {
  width: 100px;
  background-color: green;
}
#right {
  overflow: auto;
  background-color: blue;
}
#rightContent {
  height: 1000px;
  margin: 20px;
  background-color: red;
}
.displayFlex {
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
}
.flexThis1 {
  flex: 1;
  -ms-flex: 1;
  -webkit-flex: 1;
}
.displayFlexRow {
  flex-direction: row;
  -moz-flex-direction: row;
  -webkit-flex-direction: row;
}
.displayFlexCol {
  flex-direction: column;
  -moz-flex-direction: column;
  -webkit-flex-direction: column;
}
.trans {
  transition: width 0.5s;
  -o-transition: width 0.5s;
  -moz-transition: width 0.5s;
  -webkit-transition: width 0.5s;
}

<button onclick="toggleMenu()">Scroll down and click me!</button><button onclick="toggleTrans(this)">Turn off transition</button><br>
Scrolled:<div id="scrollCount">0</div><br>
<div id="body" class="displayFlex displayFlexRow">
  <div id="left" class="trans">
    asdf
  </div>
  <div id="right" class="flexThis1" onscroll="countScrolls()">
    <div id="rightContent">asdf</div>
  </div>
</div>

感谢您的帮助!

Answer 1

不确定为什么会发生，但以下似乎可以解决它:

#right {
  height: 100%;
}

var menuIsToggled = true;
function toggleMenu() {
  document.getElementById('left').style.width = menuIsToggled ? '0px' : '';
  menuIsToggled = !menuIsToggled;
}
var transIsToggled = true;
function toggleTrans(bt){
  if(transIsToggled){
    document.getElementById('left').className = "";
    bt.innerHTML = "Turn on transition";
  }else{
    document.getElementById('left').className = "trans";
    bt.innerHTML = "Turn off transition";
  }
  transIsToggled = !transIsToggled;
}

div {
  overflow: hidden;
}
#body {
  height: 300px
}
#left {
  width: 100px;
  background-color: green;
}
#right {
  height: 100%;
  overflow: auto;
  background-color: blue;
}
#rightContent {
  height: 1000px;
  margin: 20px;
  background-color: red;
}
.displayFlex {
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
}
.flexThis1 {
  flex: 1;
  -ms-flex: 1;
  -webkit-flex: 1;
}
.trans {
  transition: width 0.5s;
  -o-transition: width 0.5s;
  -moz-transition: width 0.5s;
  -webkit-transition: width 0.5s;
}

<button onclick="toggleMenu()">Scroll down and click me!</button><button onclick="toggleTrans(this)">Turn off transition</button>
<div id="body" class="displayFlex">
  <div id="left" class="trans">
    asdf
  </div>
  <div id="right" class="flexThis1">
    <div id="rightContent">asdf</div>
  </div>
</div>