在其他弹性项目在Chrome中更改大小后,Div Flex项目会滚动到顶部

Question

就像在标题中描述的那样,我的网站上有一个flex布局.

我左边有一个你可以隐藏的菜单栏.在css-transitions上,这看起来很平滑.问题是它的权利.由于flex布局,当我隐藏菜单栏时它必须调整大小.div是可滚动的.

现在,如果我隐藏或显示菜单栏右侧的div将其滚动偏移重置为零.这似乎只是Chrome中的情况.在Firefox,Edge和IE(IE还有其他问题)这样做是否正常.

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

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

我尝试使用JavaScript进行脏修复,将每毫秒的滚动偏移设置为固定值,但它所做的只是在两个滚动位置之间快速跳转...

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

最后的最小例子.

编辑:我的猜测是div以某种方式重新加载,但似乎并非如此.当div跳回到顶部时会触发scroll事件...很遗憾,此事件无法取消.通过此事件重置滚动位置也很紧张.

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>