在Chrome中，当另一个Flex项目改变大小后，Flex项目滚动到顶部

Question

如标题所述，我在我的网站上使用了flex布局。

我在左侧有一个菜单栏，可以隐藏。通过css转换，这看起来非常顺畅。问题是它右边的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>

感谢您的帮助！

- l4z6_z

---

@Oriol 已添加最小示例。希望这样可以了。 - l4z6_z

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>

- Oriol

---

这真的可以解决问题！即使有嵌套的 flexbox……但是我在我的页面上实现起来有一些困难……如果我将高度设置为 100%，它的行为就像对于普通元素没有设置高度一样……但是我正在努力解决。 - l4z6_z

尝试实现此解决方案后，发现另一种解决方案。 - l4z6_z

Answer 2

我通过将有问题的 div 嵌套在另一个 flex-div 中找到了另一种解决方案。

<div class="flexThis1 displayFlex">
    <div id="right" class="flexThis1">
        <div id="rightContent">asdf</div>
    </div>
</div>

var menuIsToggled = true;

function toggleMenu() {
  if (menuIsToggled) {
    document.getElementById('left').style.width = '0px';
  } else {
    document.getElementById('left').setAttribute('style', '');
  }
  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;
}

body {
  height: 300px;
}
div {
  overflow: hidden;
}
#body {} #left {
  width: 100px;
  background-color: green;
}
#right {
  overflow: auto;
  background-color: blue;
}
#rightContent {
  height: 1000px;
  margin: 20px;
  background-color: red;
}
.displayFlex,
body {
  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,
body {
  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;
}

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

- l4z6_z