Displaying an element outside overflow hidden container

后端未结

关注

 8  1178

你的背包 2020-12-31 06:14

I have a

which is made scrollable by wrapping it in a

of fixed height.

This

has a drop

8条回答

感动是毒 (楼主)

2020-12-31 07:08

You can change positioning of the dropdown to fixed and handle the scroll using js, like the following.

var main = document.getElementsByClassName('main')[0];
var dd = document.getElementsByClassName('pAbsolute')[0];
var offset = dd.getBoundingClientRect().top;
main.onscroll = function() {
  var st = main.scrollTop;
  ddt = (offset - st);
  dd.style.top = ddt + 'px';
}

.main {
  height: 100px;
  overflow-y: scroll;
  overflow-x: hidden;
}
.pRelative {
  position: relative;
}
.pAbsolute {
  position: fixed;
}
.dropdown {
  width: 100px;
  background-color: cornflowerblue;
  z-index: 1000;
}
.option {
  border-top: 1px solid green;
  border-bottom: 1px solid green;
}
table td {
  border: 1px solid black;
  padding: 10px;
}

row1 column1	Zero One Two Three Four Five Six	row1 column3
row2 column1	row2 column2	row2 column3
row3 column1	row3 column2	row3 column3
row4 column1	row4 column2	row4 column3
row5 column1	row5 column2	row5 column3
row6 column1	row6 column2	row6 column3
row7 column1	row7 column2	row7 column3
row8 column1	row8 column2	row8 column3

Demo

(tested only in safari 6.1 mac - unfortunately doesn't works in any latest browsers) Updated Demo or Another Demo

The only possible cross browser workaround i could find for hiding the fixed elements overflow is to clip the container (this requires it to be a positioned element)