javascript - scrollTop = scrollHeight 在聊天机器人中不起作用

Question

作为 Technigo 训练营的一部分，我的团队创建了一个聊天机器人并让它运行良好！（在这里看到它）但是，当内容大于聊天容器时，会出现一个滚动并且它不会滚动到最后一条消息。

我们尝试使用（在函数 showMessage 和 showFinalMessage 上）

chat.scrollTop = chat.scrollHeight

但它似乎不起作用，如下图所示

在此处输入图像描述

在这里查看 JS 代码

// All the DOM selectors stored as short variables
const chat = document.getElementById('chat')
const inputWrapper = document.getElementById('input-wrapper')

// Global variables, if you need any, declared here
let stepNumber = 1

// Functions declared here

const botAnswer = (message) => {
  showMessage (message, 'bot')
}

const userAnswer = (message) => {
  showMessage (message, 'user') 
}

// This function will add a chat bubble in the correct place based on who the sender is
const showMessage = (message, sender) => {
  console.log(sender)
  if (sender === 'user') {
    chat.innerHTML += `
      <section class="user-msg">
        <div class="bubble user-bubble">
          <p>${message}</p>
        </div>
        <img class="profile-pic" src="assets/user-img.jpeg" alt="User" />  
      </section>
    `
  } else if (sender === 'bot') {
    chat.innerHTML += `
      <section class="bot-msg">
        <img class="profile-pic" src="assets/bot-img.jpeg" alt="Bot" />
        <div class="bubble bot-bubble">
          <p>${message}</p>
        </div>
      </section>
    `
  }

  // This little thing makes the chat scroll to the last message when there are too many to be shown in the chat box
  chat.scrollTop = chat.scrollHeight
}

const nextStep = (message) => {
  console.log( 'stepNumber', stepNumber)
  if (answerNumber === 1) {
    userAnswer (message)
    setTimeout (() => showPlace(message),1000)
  } else if (answerNumber === 2) {
    userAnswer (message)
    setTimeout (() => showVibe(message),1000)
  } else if (answerNumber === 3) {
    userAnswer (message)
    setTimeout (() => showOutfit(message),1000)
  }
}


// Starts here

const showMood = () => {
  answerNumber = 1
  botAnswer(`Welcome! How's the party mood?`)

  inputWrapper.innerHTML = `
  <div class="slider-container">
  <div class="emoji-container">
  <p class="emoji">&#127866;</p> 
  <p class="emoji">&#127867;</p> 
  <p class="emoji">&#127865;</p> 
  <p class="emoji">&#127864;</p> 
  <p class="emoji">&#127863;</p>
  <p class="emoji">&#127870;</p>
  </div>
  <input id="sliderinput" type="range" min="1" max="100" value="50" class="slider">
  </div>
  `
  document.getElementById('sliderinput')
  .addEventListener('mouseup', () => nextStep ('This is my mood!'))
}


const showPlace = () => {
  answerNumber++
  botAnswer(`Good to know! But where's the party at?`)

  inputWrapper.innerHTML = `
    <button id="nightclubBtn">Nightclub</button>
    <button id="cocktailBtn">Cocktail bar</button>
  `
  document.getElementById('nightclubBtn')
  .addEventListener('click', () => nextStep('Nightclub'))
  document.getElementById('cocktailBtn')
  .addEventListener('click', () => nextStep('Cocktail bar'))
} 

const showVibe = (place) => {
  answerNumber++

  if (place === 'Nightclub') {
    botAnswer(`Are we talking Berghain or Studio54?`)

    inputWrapper.innerHTML = `
    <button id="berghainBtn">Berghain</button>
    <button id="studio54Btn">Studio 54</button>
  `
  document.getElementById('berghainBtn')
  .addEventListener('click', () => nextStep('Berghain'))
  document.getElementById('studio54Btn')
  .addEventListener('click', () => nextStep('Studio 54'))

  } else {
    botAnswer(`In the mood for Cosmopolitan or Old Fashioned?`)

    inputWrapper.innerHTML = `
    <button id="cosmoBtn">Cosmopolitan</button>
    <button id="oldfashionBtn">Old Fashioned</button>
  `
  document.getElementById('cosmoBtn')
  .addEventListener('click', () => nextStep('Cosmopolitan'))
  document.getElementById('oldfashionBtn')
  .addEventListener('click', () => nextStep('Old fashioned'))
  }

}

const showOutfit = (outfit) => {
  answerNumber++

  botAnswer(`I got the perfect outfit for you! Party on!`)

  const showFinalMessage = () => {
    chat.innerHTML += `
      <section class="bot-msg">
      <img class="profile-pic" src="assets/bot-img.jpeg" alt="Bot" /> 
        <div class="bubble bot-bubble final">
          <img class="outfit-gif" id="outfitGif" src=""/>
        </div> 
      </section>
    `
    chat.scrollTop = chat.scrollHeight
}

  if (outfit === 'Berghain') {
    showFinalMessage()
    document.getElementById("outfitGif").src = "assets/berghain.gif"
  }

  else if (outfit === "Studio 54") {
    showFinalMessage()
    document.getElementById("outfitGif").src = "assets/studio54.gif"
  }

  else if (outfit === "Cosmopolitan") {
    showFinalMessage()
    document.getElementById("outfitGif").src = "assets/cocktail.gif"
  }

  else if (outfit === "Old fashioned") {
    showFinalMessage()
    document.getElementById("outfitGif").src = "assets/oldfashioned.gif"
  }

  inputWrapper.innerHTML = ""
}

setTimeout(showMood, 1000)

作为参考，另请参阅此处的主要 och 聊天的 CSS 代码。

标签： javascriptbotsscrolltop