我在一个现有项目中有一个模态，我希望能够在没有滚动条的情况下滚动模态。 这个例子是我要去的-https://jsfiddle.net/0x0049/koodkcng/
我有一个有效的模态，但是由于模态是如何嵌套的，我认为我遇到了一个问题。当前发生的情况是.modalContent不能扩展到适合.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 100;
display: none;
-webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
transition: opacity 1s;
&.open {
display: block;
}
&.fadeIn {
opacity: 1;
}
&.fadeOut {
opacity: 0;
}
@include for-size('mobile') {
height: 100vh;
}
}
.modal {
position: fixed;
background-color: $white;
display: none;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 101;
overflow-y: auto;
overflow-x: hidden;
padding: 5px;
.modalContent {
padding-top: 60px;
overflow-y: auto;
max-height: calc(100% - 70px);
@include for-size('mobile') {
overflow-x: hidden;
}
}
}
.modal将overflow:auto设置为可见仍然不允许模态适合屏幕。我还尝试了消除x和y溢出并将溢出设置为.modalContent
将 const render = () => {
return <button onClick={this.handleClick}>Click me</button>;
};
设置为可见可扩展模式内容，但不允许滚动。
我是saas的新手，所以我不确定从那里开始。