javascript - 使用 ScrollTop 的聊天框不适用于使用 jQuery 的下一个包装类

Question

嗨，我使用 jquery 创建聊天框。当我多次单击该按钮时，滚动将返回顶部。我的目标是当我单击按钮时，它将滚动到下一个包装类。

我的 HTML：

<div class="all">
<div class="wrap">
<p>
  Hi, Please click data
</p>
<div class="data" data-content="0">data 1</div>
<div class="data" data-content="1">data 2</div>

JS

var data = [


{
    "content": `
    <p>first content</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam accusamus, maiores velit aut sint perspiciatis facilis. Asperiores expedita, iusto suscipit aut numquam corporis sunt sint eius dolorum ea, adipisci saepe.</p>
    `
  },
  {
    "content":`
        <p>second content</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam accusamus, maiores velit aut sint perspiciatis facilis. Asperiores expedita, iusto suscipit aut numquam corporis sunt sint eius dolorum ea, adipisci saepe.</p>
    `
  }
];

//$('.data').click(function(){
$(document).on('click','.data', function(){
    var datacontent = $(this).attr('data-content');
  
  $(this).parent().parent().append(`
    <div class="wrap">
        <p>${data[datacontent].content}</p>
        <div class="data" data-content="0">data 1</div>
      <div class="data" data-content="1">data 2</div>
    </div>
  `);
  
  $('.all').animate({
    //sepertinya disini bugsnya
    scrollTop: $(this).parent().next().prop('scrollHeight')
    /* scrollTop: $('.wrap').prop('scrollHeight') */
  },100)
});

这是我的完整代码：https ://jsfiddle.net/dedi_wibisono17/jfh4y5ot/56/

谢谢

标签： javascripthtmljquerycss

Answer 1

也许你可以使用这样的东西，谢谢

var data = [{
    "content": `
    <p>first content</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam accusamus, maiores velit aut sint perspiciatis facilis. Asperiores expedita, iusto suscipit aut numquam corporis sunt sint eius dolorum ea, adipisci saepe.</p>
    `
  },
  {
    "content": `
        <p>second content</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam accusamus, maiores velit aut sint perspiciatis facilis. Asperiores expedita, iusto suscipit aut numquam corporis sunt sint eius dolorum ea, adipisci saepe.</p>
    `
  }
];

$(document).on('click', '.data', function() {
  var datacontent = $(this).attr('data-content');

  $('.all').append(`
    <div class="wrap">
        <p>${data[datacontent].content}</p>
        <div class="data" data-content="0">data 1</div>
      <div class="data" data-content="1">data 2</div>
    </div>
  `).animate({
      scrollTop: $(this).parent().next().prop('scrollHeight')
    }, 100);

});

.data {
  background:tomato;
  color:white;
  padding:8px;
  display:inline;
  cursor:pointer;
}

.all{
  height: 200px;
  border:1px solid;
  overflow-y:auto;
  padding:0 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="all">
  <div class="wrap">
    <p>
      Hi, Please click data
    </p>
    <div class="data" data-content="0">data 1</div>
    <div class="data" data-content="1">data 2</div>
  </div>
</div>