Vuejs网站：用于自动滚动垂直的scrollTop在iOS Safari中不起作用答案

【问题标题】：Vuejs website: scrollTop for autoscrolling vertical is not working in iOS SafariVuejs网站：用于自动滚动垂直的scrollTop在iOS Safari中不起作用
【发布时间】：2021-06-11 06:05:19
【问题描述】：

我有一个聊天小工具，如果新消息垂直到底部但不会在移动 iOS Safari 上出现，它会自动滚动。向下滚动代码是这样的：

methods: {
            scrollDown: function(){
                if (!this.isLoadingHistory) {
                        this.$el.scrollTop = this.$el.scrollHeight;
                        }
                }
            },

经过研究，我发现 Safari 的 scrollTop 属性存在问题，因为它始终为零并且不能用于自动滚动到底部。有人知道这个问题的解决方案吗？谢谢

消息来的组件的css属性是：

.chat-area {
        flex: 1 1 auto;
        overflow-x: hidden;
        overflow-y: auto;
        height: 100%;
    }

我尝试将overflow-x:hidden 更改为overflow-x:auto 和overflow-x:scroll，但没有任何帮助。

【问题讨论】：

标签： ios safari overflow scrolltop autoscroll

【解决方案1】：

我的问题的解决方案如下：

var userAgent = window.navigator.userAgent;
            if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)) {
                document.getElementsByClassName("chat-area")[0].style.position="absolute";
                document.getElementsByClassName("chat-area")[0].style.height= "80%";
                document.getElementsByClassName("input-row")[0].style.position="relative";
                document.getElementsByClassName("input-row")[0].style.width="100%";
                document.getElementsByClassName("widget-footer")[0].style.visibility="visible";
                if(window.innerHeight<= 568)
                {
                    document.getElementsByClassName("chat-area")[0].style.height= "75%";
                }

如果位置是静态的而不是绝对的，iOS Safari 似乎在自动滚动和平滑滚动方面存在问题。

【讨论】：