javascript - 通过.html() 更改div 中的内容时，jquery 滚动条消失了，如何解决？

Question

在 div block 中更改内容时 jquery 滚动条消失，$('.scrollbar-outer').css('overflow', 'auto) 不工作，如何修复？我正在尝试更改类以将溢出添加到 .txttb，但仍然相同

jQuery(document).ready(function() {
  jQuery('.scrollbar-outer').scrollbar();
});

$(document).on('click', '.hhh', function(e) {
  e.preventDefault();
  $('.txtb').html('dorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, harum fugit doloremque amet qui. Facilis, consectetur ab fuga, dolorem sapiente tempore laboriosam voluptates nulla beatae architecto placeat enim inventore, nemo praesentium quisquam quia! At voluptatibus sit error recusandae animi, provident atque laborum iusto esse illum consequatur aspernatur nisi, eveniet harum voluptates sapiente blanditiis quibusdam eos dolorum quisquam nulla eligendi! Corporis excepturi temporibus quibusdam quasi, ut assumenda aut, aliquid officiis facilis minus nisi. Quam est itaque temporibus, ex soluta blanditiis sapiente consectetur quae quasi mollitia ut in ipsum modi tempore sint quisquam eos laboriosam, inventore, optio delectus reiciendis, assumenda doloremque explicabo.')
  $('.scrollbar-outer').css("overflow", "auto");
})

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

.main_block {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.txtb {
  width: 350px;
  height: 200px;
  color: #313131;
  border: 1px solid #33ffbd;
  overflow: hidden;
  overflow-y: visible;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.scrollbar/0.2.11/jquery.scrollbar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.scrollbar/0.2.11/jquery.scrollbar.min.css">
<div class="main_block">
  <div class="txtb scrollbar-outer">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi error, vero. Tenetur beatae labore facere modi! Cupiditate in tempora quaerat blanditiis voluptatibus magnam facilis rem, quo sequi necessitatibus excepturi cumque, dolore. Molestias non
    nisi porro delectus doloribus inventore vero asperiores culpa mollitia aliquam fugiat suscipit nostrum sed quibusdam voluptatibus, enim, accusantium quam, debitis dolore minus modi a. Quos ex ut, qui, quae modi assumenda veritatis sapiente voluptates.
    Eius quidem quas, quos veritatis, cumque consequatur soluta, alias velit sed inventore itaque dolor. Alias, rerum, veritatis! Porro vero, delectus quam repellendus doloremque vitae facilis quod expedita commodi iure impedit corporis, sunt voluptatum
    quaerat, natus. Doloribus culpa ea, laudantium eos illo iure qui aperiam quod, repellat reiciendis quos rem, quisquam vitae officiis nam unde itaque dignissimos provident dolor dolorem aspernatur, possimus corrupti in! Maxime, nostrum, perspiciatis
    vero quos similique illo nulla praesentium id soluta explicabo quidem quam! Nesciunt quasi nisi, facilis distinctio quae! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia natus recusandae quibusdam exercitationem cumque inventore
    est illum! Illo, a, unde. Accusamus veritatis quibusdam illo numquam dicta recusandae, natus voluptatum magnam provident, fuga consectetur eaque unde porro facilis, corporis distinctio excepturi, fugiat illum nesciunt cupiditate voluptatem. Aut incidunt
    iusto animi quidem fugit, quae dolorum voluptate aliquid officiis natus commodi aspernatur dolore, at neque vitae quam saepe quibusdam consectetur cumque impedit necessitatibus ad nam, vero. Ipsam saepe odit neque molestias quod asperiores aspernatur
    voluptas pariatur? Impedit tempora quod deserunt, soluta cupiditate dolores quasi doloribus suscipit placeat molestias nemo esse iste harum odio natus saepe quae sapiente explicabo sint ullam minus asperiores magnam quia excepturi. Mollitia velit
    expedita rem, vero debitis ratione odit modi quidem explicabo molestiae in facere cupiditate sit, quaerat magnam tempora aspernatur illum voluptatibus sunt, unde nesciunt numquam laboriosam. Possimus iusto doloribus delectus magni, cum in eaque, nam
    consequatur voluptas eius dignissimos, magnam molestias architecto. Deserunt unde adipisci accusantium dolorem, praesentium consectetur minus amet molestias officiis veritatis sed, illo recusandae quod! Perferendis illum ab fugiat cupiditate iste
    tempore pariatur, excepturi numquam odio soluta, culpa laborum suscipit sint quo quaerat repellat quos enim, voluptate impedit saepe minus doloribus. Sunt laudantium, soluta.
  </div>
  <button class="hhh">Hello</button>
</div>

Answer 1

代替 $('.txtb).html，使用 $('.txtb.scroll-content').html(

jQuery(document).ready(function() {
    jQuery('.scrollbar-outer').scrollbar();
});
  
$(document).on('click', '.hhh', function(e) {
    e.preventDefault();
    $('.txtb.scroll-content').html('dorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, harum fugit doloremque amet qui. Facilis, consectetur ab fuga, dolorem sapiente tempore laboriosam voluptates nulla beatae architecto placeat enim inventore, nemo praesentium quisquam quia! At voluptatibus sit error recusandae animi, provident atque laborum iusto esse illum consequatur aspernatur nisi, eveniet harum voluptates sapiente blanditiis quibusdam eos dolorum quisquam nulla eligendi! Corporis excepturi temporibus quibusdam quasi, ut assumenda aut, aliquid officiis facilis minus nisi. Quam est itaque temporibus, ex soluta blanditiis sapiente consectetur quae quasi mollitia ut in ipsum modi tempore sint quisquam eos laboriosam, inventore, optio delectus reiciendis, assumenda doloremque explicabo. impedit saepe minus doloribus. Sunt laudantium, soluta. it saepe minus doloribus. Sunt laudantium, soluta ')
    $('.scrollbar-outer ').css('overflow', 'auto');
})

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  html,
  body {
    height: 100%;
  }
  
  .main_block {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  
  .txtb {
    width: 350px;
    height: 200px;
    color: #313131;
    border: 1px solid #33ffbd;
    /* overflow: hidden; */
    /* overflow-y: visible; */
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.scrollbar/0.2.11/jquery.scrollbar.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.scrollbar/0.2.11/jquery.scrollbar.min.css">
        <div class="main_block">
          <div class="txtb scrollbar-outer">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi error, vero. Tenetur beatae labore facere modi! Cupiditate in tempora quaerat blanditiis voluptatibus magnam facilis rem, quo sequi necessitatibus excepturi cumque, dolore. Molestias non
            nisi porro delectus doloribus inventore vero asperiores culpa mollitia aliquam fugiat suscipit nostrum sed quibusdam voluptatibus, enim, accusantium quam, debitis dolore minus modi a. Quos ex ut, qui, quae modi assumenda veritatis sapiente voluptates.
            Eius quidem quas, quos veritatis, cumque consequatur soluta, alias velit sed inventore itaque dolor. Alias, rerum, veritatis! Porro vero, delectus quam repellendus doloremque vitae facilis quod expedita commodi iure impedit corporis, sunt voluptatum
            quaerat, natus. Doloribus culpa ea, laudantium eos illo iure qui aperiam quod, repellat reiciendis quos rem, quisquam vitae officiis nam unde itaque dignissimos provident dolor dolorem aspernatur, possimus corrupti in! Maxime, nostrum, perspiciatis
            vero quos similique illo nulla praesentium id soluta explicabo quidem quam! Nesciunt quasi nisi, facilis distinctio quae! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia natus recusandae quibusdam exercitationem cumque inventore
            est illum! Illo, a, unde. Accusamus veritatis quibusdam illo numquam dicta recusandae, natus voluptatum magnam provident, fuga consectetur eaque unde porro facilis, corporis distinctio excepturi, fugiat illum nesciunt cupiditate voluptatem. Aut incidunt
            iusto animi quidem fugit, quae dolorum voluptate aliquid officiis natus commodi aspernatur dolore, at neque vitae quam saepe quibusdam consectetur cumque impedit necessitatibus ad nam, vero. Ipsam saepe odit neque molestias quod asperiores aspernatur
            voluptas pariatur? Impedit tempora quod deserunt, soluta cupiditate dolores quasi doloribus suscipit placeat molestias nemo esse iste harum odio natus saepe quae sapiente explicabo sint ullam minus asperiores magnam quia excepturi. Mollitia velit
            expedita rem, vero debitis ratione odit modi quidem explicabo molestiae in facere cupiditate sit, quaerat magnam tempora aspernatur illum voluptatibus sunt, unde nesciunt numquam laboriosam. Possimus iusto doloribus delectus magni, cum in eaque, nam
            consequatur voluptas eius dignissimos, magnam molestias architecto. Deserunt unde adipisci accusantium dolorem, praesentium consectetur minus amet molestias officiis veritatis sed, illo recusandae quod! Perferendis illum ab fugiat cupiditate iste
            tempore pariatur, excepturi numquam odio soluta, culpa laborum suscipit sint quo quaerat repellat quos enim, voluptate impedit saepe minus doloribus. Sunt laudantium, soluta. 
          </div>
          <button class="hhh">Hello</button>
        </div>