6

Div Flex The item scrolls up after another flexible element has changed size in...

 3 years ago
source link: https://www.codesd.com/item/div-flex-the-item-scrolls-up-after-another-flexible-element-has-changed-size-in-chrome.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Div Flex The item scrolls up after another flexible element has changed size in Chrome

advertisements

Like in the title described i have a flex Layout on my website.

I have a menubar on the left which you can hide. Over css-transitions this does look smooth. The Problem is the div right of it. Because of the flex layout it has to resize when I hide the menubar. The div is scrollable.

Now if I hide or show the menubar the div right of it resets its scroll offset to zero. This seems only the case in Chrome. In Firefox, Edge and IE (IE has other problems though) does this work correctly.

It does work correctly if i turn off the css transitions for the menubar, but I want transitions.

It does not work when I use animation instead of transition.

I tried to do a dirty fix with JavaScript to set the scroll offset every millisecond to a fixed value, but all it did was to jump between the two scroll positions really fast...

Any idea how to fix this or what may be the cause?

Minimal example at the end.

edit: My guess was that the div is somehow reloaded, but it seems that this is not the case. The scroll event is fired when the div jumps back to the top... unfortunately this event can not be canceled. Resetting the scroll position via this event is also jumpy.

Opera displays the same Problem.

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>

Thank you for your help!

Not sure why it happens, but the following seems to fix it:

#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>

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK