移动版 Safari 中出现意外的滚动行为

Question

我正在尝试设计聊天机器人的样式，但我在 div 中遇到了一些意外的滚动或缺乏行为，但仅限于 iOS/移动 Safari。

预期的行为是在添加新元素或使其可见后让 div 滚动。 Chrome 和桌面版 Safari 就是这种情况。但在移动游猎中，这种情况不会发生。这是问题的屏幕截图：

这是一个实例，请注意，这在桌面 Safari 和 Chrome 上完美运行 - 该问题仅发生在 iOS/移动 Safari 上：

function randint(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}



function update_transcript(party, entry, time) {

        time = time.toLocaleString('en-US', {timeStyle: 'short'});

        if (party == "Human: "){
            const div1 = document.createElement("div");
            div1.classList.add("flex", "justify-end");

            const div2 = document.createElement("div");
            div2.classList.add("mt-3");

            const div3 = document.createElement("div");
            div3.classList.add("flex", "justify-end");

            const div4 = document.createElement("div");
            div4.classList.add("bg-white", "shadow", "border", "border-gray-100", "text-right", "rounded-l-lg", "rounded-tr-lg", "w-fit", "max-w-xs", "py-2", "px-3");
            div4.textContent = entry;

            div3.appendChild(div4);
            div2.appendChild(div3);

            const div5 = document.createElement("div");
            div5.classList.add("p-1", "text-right", "text-xs", "text-gray-400");

            const span1 = document.createElement("span");
            span1.classList.add("receipt", "font-semibold", "hidden");
            span1.textContent = "Read";

            const span2 = document.createElement("span");
            span2.textContent = time;

            div5.appendChild(span1);
            div5.appendChild(document.createTextNode(" "));
            div5.appendChild(span2);

            div2.appendChild(div5);
            div1.appendChild(div2);

            document.getElementsByClassName("transcript")[0].appendChild(div1);
        } else if (party == "BOT: "){
            const div1 = document.createElement("div");
            div1.classList.add("flex", "justify-start");

            const div2 = document.createElement("div");
            div2.classList.add("mt-3");

            const div3 = document.createElement("div");
            div3.classList.add("flex", "justify-start");

            const div4 = document.createElement("div");
            div4.classList.add("bg-gray-100", "text-left", "rounded-r-lg", "rounded-tl-lg", "shadow", "w-fit", "max-w-xs", "py-2", "px-3");
            div4.textContent = entry;

            div3.appendChild(div4);
            div2.appendChild(div3);

            const div5 = document.createElement("div");
            div5.classList.add("p-1", "text-left", "text-xs", "text-gray-400");

            const span1 = document.createElement("span");
            span1.textContent = time;

            div5.appendChild(span1);
            div2.appendChild(div5);
            div1.appendChild(div2);

            document.getElementsByClassName("transcript")[0].appendChild(div1);
        }
    }


    update_transcript('BOT: ', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum augue eu scelerisque finibus. Proin tincidunt elit a justo tincidunt porttitor. Mauris ac porttitor nulla. Cras hendrerit sem eu risus hendrerit, vel bibendum dolor congue. Pellentesque id efficitur leo. Nullam non elit nunc. Ut sit amet magna at purus sollicitudin lobortis. Aenean sed massa tortor. Integer lobortis dui massa, quis mollis elit porttitor at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.?', new Date());



const query = document.getElementsByClassName("query")[0];

const form = document.querySelector('form');
form.addEventListener('submit', event => {
    event.preventDefault();

    document.getElementsByClassName("submit-query")[0].classList.add("hidden");


    //updates the chat window
    update_transcript('Human: ', query.value, new Date());

    // clear query text bos
    document.getElementsByClassName("query")[0].value = "";



var data = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum augue eu scelerisque finibus. Proin tincidunt elit a justo tincidunt porttitor. Mauris ac porttitor nulla. Cras hendrerit sem eu risus hendrerit, vel bibendum dolor congue. Pellentesque id efficitur leo. Nullam non elit nunc. Ut sit amet magna at purus sollicitudin lobortis. Aenean sed massa tortor. Integer lobortis dui massa, quis mollis elit porttitor at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.";

        // adds a read receipt
        document.querySelectorAll('.receipt')[document.querySelectorAll('.receipt').length - 1].classList.remove("hidden");


        if (data) {

            // generated a random number between 1 and 4 seconds for a response time (when they start typing)
            let response_speed = randint(1000, 2000);

            // sets how long AI types for 10ms per character
            let typing_speed = (data.length * 10);


            setTimeout(function(){

                document.getElementsByClassName("typing-indicator")[0].classList.remove("hidden");

                setTimeout(function(){

                    // updates the chat window with the response
                    update_transcript('BOT: ', data, new Date());

                    document.getElementsByClassName("typing-indicator")[0].classList.add("hidden");

                    document.getElementsByClassName("error")[0].classList.add("hidden");

                }, typing_speed);

            }, response_speed);


        }


});

.typing-container{
    height: 10px;
    width: 40px;
}

.typing {
    position: relative;
}
.typing span {
    content: "";
    animation: blink 1.5s infinite;
    animation-fill-mode: both;
    height: 10px;
    width: 10px;
    background-color: rgb(156, 163, 175);
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
}
.typing span:nth-child(2) {
    animation-delay: 0.2s;
    margin-left: 15px;
}
.typing span:nth-child(3) {
    animation-delay: 0.4s;
    margin-left: 30px;
}

@keyframes blink {
    0% {
        opacity: 0.1;
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 0.1;
    }
}

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
    <script src="https://cdn.tailwindcss.com"></script>
  
  <body class="bg-gray-100 px-3 pt-3">

    <div class="bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all h-96 w-96">

        <div class="flex flex-col justify-between h-full">




            <div class="flex flex-col-reverse overflow-y-scroll p-3 h-full">

                <div class="typing-indicator flex justify-start hidden">
                    <div class="bg-gray-100 rounded-lg p-3 mb-4">
                        <div class="typing-container">
                            <div class="typing">
                                <span></span>
                                <span></span>
                                <span></span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="error flex justify-center p-3 hidden">
                    <p class="error-message text-red-600 text-sm text-center font-medium">We apologize for the inconvenience, our chat encountered an error. Please try again later.</p>
                </div>

                <div class="transcript"></div>

            </div>


            <div class="flex flex-col">
                <div class="relative border-t border-gray-100 p-1">
                    <form class="mb-0">
                        <input type="text" placeholder="Message..." maxlength="255" class="query bg-white outline-none w-full pl-6 pr-12 py-3"/>
                        <span class="absolute right-0 pr-3">
                            <button type="submit" class="submit-query pr-3 py-3 w-9 cursor-pointer">
                                <svg class="fill-current" viewBox="0 0 20 20">
                                    <path d="M17.218,2.268L2.477,8.388C2.13,8.535,2.164,9.05,2.542,9.134L9.33,10.67l1.535,6.787c0.083,0.377,0.602,0.415,0.745,0.065l6.123-14.74C17.866,2.46,17.539,2.134,17.218,2.268 M3.92,8.641l11.772-4.89L9.535,9.909L3.92,8.641z M11.358,16.078l-1.268-5.613l6.157-6.157L11.358,16.078z" />
                                </svg>
                            </button>
                        </span>
                    </form>
                </div>
            </div>





        </div>

    </div>



</body>

当添加新内容或使其可见时，我需要让 div 滚动到底部。如何在移动/iOS Safari 上修复此问题？

Answer 1

@tony 你在这方面有什么进展吗？当我尝试使用

flex-direction: column-reverse

实现反向滚动时，我也遇到了这个问题。 Mobile Safari 似乎不支持此功能，或者有错误。

我发现的唯一解决方法是使用标准滚动并在添加内容时手动强制滚动到底部。但这并不是很理想。