防止在操作DOM后Chrome浏览器跳到页面顶部

Question

我正在使用Action Cable来建立一个讨论室，用户可以在其中互相提问。问题发布后，会议室中的所有其他用户都将看到它。我在Chrome上遇到了一个奇怪的问题：当我自己或另一个用户发布问题时，页面跳至顶部。这在其他浏览器上不会发生，这是一个令人讨厌的问题。我所有的代码所做的就是在DOM上添加一个小元素。这是我的控制器：

class QuestionsController < ApplicationController
  def create
    @question = Question.new(create_params)

    if @question.save
      ActionCable.server.broadcast(
        "discussion_room",
        message: {
          event_type: "new_question",
          question_id: @question.id,
          question_item: ApplicationController.render(partial: "questions/question_item", locals: { question: @question })
        }
      )
    end

    respond_to do |format|
      format.js
    end
  end

  ...
end

这里是处理new_question事件的JavaScript：

App["discussion_room"] = App.cable.subscriptions.create({ channel: "DiscussionRoomChannel", roomId: roomId },
{
  received: function(data)
  {
    switch (data.message.event_type)
    {
      case 'new_question':
        this.newQuestionEvent(data);

        break;
      default:
        break;
    }
  },

  newQuestionEvent: function(data)
  {
    $("#questions-list").append(data.message.question_item);
    $("#questions-container").removeAttr("hidden");
  }
});

[在调试时，我注释掉了附加HTML的行，并且确实，页面不再跳转。这不是jQuery append方法的正常行为，因此我不确定发生了什么。

我该如何解决此问题？

Answer 1

如果无法解决此问题，您可以在简单的javascript中使用此技巧，以解决此问题...

步骤1：在发布新消息之前保存屏幕行：

 var Y=window.scrollY;

步骤2：通过调用常规函数发布新消息。

步骤3：滚动回到以前保存的位置：

 window.scrollTo(0,Y);