Question

我有一个问题，即使隐藏溢出，我的身体内容也可以滚动。可以使用以下链接在IE中复制此内容：https://plnkr.co/edit/2o6dID5rB9zAdeUfiVDb?p=preview

如果我单击鼠标左键并将其向下移动，则主体内容将向下滚动。有没有解决方法？

body {
    height: 100%;
    overflow: hidden;
}

.modal-backdrop {
  position:fixed;
  top:0;
    width: 100%;
    height: 100%;
    z-index: 10001;
    background-color: red;
    opacity: 0.4;
}

.event-modal-wrapper {
    position: fixed;
    z-index: 10002;
    top: 0;
    margin: 0 auto;
    padding-top: 140px;
    padding-bottom: 140px;
    right: 0;
    width:300px;
    max-width: 95%;
    height: auto;
}

.event-modal-container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #e9ebee;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    overflow: auto;
    padding: 10px;
    z-index: 10003;
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
    <h1>Hello Plunker!</h1><br />
          
    <div class="modal-backdrop" ></div>
    
    <div class="event-modal-wrapper">
        <div class="event-modal-container">
            asdsa<br />
            asdsa<br />

            asdsa<br />        asdsa<br />
            asdsa<br />
            asdsa<br />
            asdsa<br />
            asdsa<br />        asdsa<br />
            asdsa<br />
            asdsa<br />
            asdsa<br />
            asdsa<br />        asdsa<br />
            asdsa<br />
            asdsa<br />
            asdsa<br />
            asdsa<br />        asdsa<br />
            asdsa<br />
            asdsa<br />
            asdsa<br />
            asdsa<br />        asdsa<br />
            asdsa<br />
            asdsa<br />
            asdsa<br />
            asdsa<br />        asdsa<br />
            asdsa<br />
            asdsa<br />
            asdsa<br />
            aaaaaa<br />
        </div>
    </div>    
  </body>

</html>

Answer 1

我几乎可以肯定这里没有css解决方案（但我真的希望有...）

同时 - 这是一个HTML5解决方法：

<?=
    $form->field($model, 'type_id')->dropDownList(
            ArrayHelper::map(TipeKaryawan::find()->
                    select(' id, concat(nama_tipe, level) as description ')->all(), 
                      'id', 'description'), ['prompt' => 'Select tipe']
    )
?>

如果你想要一个javascript解决方案，你可以使用它：

<body draggable="true" ondragstart="event.preventDefault()">

您可能希望为锚定点击添加一些变通方法（如果有的话），但一般来说它应该有效。

固定div下的可滚动体

1 个答案: