innerHTML更改为较长文本后段落不可滚动

Question

我在html中有一个简单的段落，css中有overflow: scroll;。然后，我做一个简单的document.getElementById(id).innerHTML = new HTML，将最初的小文本改为更长的段落。滚动功能不会"更新"(不确定这是否是正确的术语(。我试着在jQuery中再次添加这个类，但那个bodge失败了，正确的方法是什么。

Answer 1

您需要定义p标签的最大高度&overflow-y:auto用于垂直滚动。

function addText(id){
document.getElementById(id).innerHTML = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias praesentium veniam, fugit, id asperiores pariatur neque, ullam iste dignissimos natus molestias ab. Fugiat voluptates in soluta porro inventore minima similique deserunt quidem aliquid rem fugit corporis, qui error laboriosam atque, esse neque libero quam quisquam doloremque. Commodi aliquid, id asperiores ullam est error consequuntur labore vel cupiditate, assumenda, neque beatae tempora amet. Amet, animi provident explicabo ea deserunt dolore itaque assumenda ipsa vitae numquam suscipit saepe eius deleniti repellat exercitationem libero maiores aliquid ducimus odio nesciunt placeat esse quaerat iure! Amet consequatur quasi ab. Consequuntur inventore eum dolor quos deleniti nisi nostrum, dignissimos laborum reprehenderit mollitia in. Inventore labore saepe distinctio consequuntur non assumenda necessitatibus recusandae fugiat exercitationem, ipsa nesciunt ducimus reprehenderit sapiente earum voluptatum autem sequi blanditiis similique alias quasi voluptatem. Doloribus reprehenderit, quos vitae omnis sunt doloremque? Eligendi vitae distinctio ea ex alias commodi, pariatur, unde laborum sint molestias ipsa. Doloremque doloribus necessitatibus blanditiis laudantium, iusto eius perspiciatis odio voluptate maxime sit, maiores aspernatur delectus adipisci illum explicabo praesentium, veniam porro exercitationem magni ullam libero distinctio. Deleniti porro eius, quaerat consequatur a illo repellendus consectetur nesciunt aliquid adipisci dignissimos ratione? Dolorem iure magnam repellendus! Illum sit quam impedit unde id provident sunt, blanditiis iusto rerum omnis architecto, voluptatum perspiciatis distinctio praesentium quia. Eaque a minus assumenda aliquam enim qui totam consequuntur veniam sed vero. Maiores eveniet minus exercitationem tempore dolor minima magnam iure! Nisi, voluptas. Dicta iste quia ducimus minus suscipit molestiae quaerat delectus temporibus quas, maiores harum eum tempore dolorum cumque in laborum est aliquam, beatae mollitia ea vitae! Quam ipsa nostrum eligendi, obcaecati voluptate recusandae placeat iste libero distinctio quisquam? Molestias distinctio eligendi alias voluptate sunt cum, voluptatum adipisci aliquid. Consequatur enim minima incidunt illum corrupti porro ipsam dolorem similique quia nihil! Enim, sapiente? Enim, illo!';
}

p{
border: 1px solid #ccc;
width: 200px;
max-height: 140px;
padding: 15px;
overflow: hidden;
overflow-y: auto;
}

<p id="paragraph">This is sort text...</p>

<button type="button" onclick="addText('paragraph')">Add More Text</button>