Элемент <div>, для которого overflow-y установлено значение «scroll», смещается при динамическом добавлении к нему элементов в Microsoft Edge - PullRequest
Новая
       23

Элемент <div>, для которого overflow-y установлено значение «scroll», смещается при динамическом добавлении к нему элементов в Microsoft Edge

1 голос
/ 19 января 2020

Это заставит многих почесать голову ...

Может кто-нибудь дать мне знать, почему мой элемент <div> (id 'container') смещается вниз, когда для overflow-y установлено значение "scroll" в Microsoft Edge? Кажется, работает просто отлично в Firefox. 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <meta charset="UTF-8" />

    <style>
        body {
            border: 3px dotted red; 
            position: fixed;

            width: 100%;
            height: 100%;

            display: grid;
            justify-items: center;
            align-items: center;

            overflow: hidden;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div style="height: 95%; border: 2px dotted orange; background-color: blue; overflow: hidden;">
        <div id="container" style="overflow-y: scroll; width: 60vmin; height: 95%; background-color: silver;"></div>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        for (var i = 0; i < 500; i++) {
            $('#container').append('<div style="border: 1px solid silver;">Hello World!</div>');
        }
    </script>
</body>
</html>

Вот скриншоты для Firefox и Microsoft Edge:

Firefox: Firefox

Edge: Microsoft Edge

1 Ответ

0 голосов
/ 19 января 2020

Попробуйте изменить код, как показано ниже ( демо ): 

<style type="text/css">
    body {
        border: 3px dotted red;
        position: fixed;
        width: 100%;
        height: 100%; 
        justify-items: center;
        align-items: center;
        overflow: hidden;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }   
</style>

<div style="height: 95%; width: 60vmin; border: 2px dotted orange; background-color: blue; overflow: hidden; margin-right:20px ; margin-top:20px; float:right">
    <div id="container" style="overflow-y: scroll; width: 60vmin; height: 100%; background-color: silver;"></div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
    $(function () {
        for (var i = 0; i < 500; i++) {
            $('#container').append('<div style="border: 1px solid silver;">Hello World!</div>');
        }
    });
</script>

Результат в браузере Microsoft Edge, как показано ниже:

enter image description here

...