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

Question

我有一个聊天小部件，如果新消息垂直于底部而不是移动 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，但没有任何帮助。

Answer 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 似乎在自动滚动和平滑滚动方面有问题。

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

Vuejs website: scrollTop for autoscrolling vertical is not working in iOS Safari

ios

safari

overflow

scrolltop

autoscroll