javascript - 使用 innerhtml 属性向 div 添加滚动条

Question

我正在尝试将滚动条添加到具有内部 html 属性的 div，但它不起作用。这是用 overflow: auto 属性控制 div 溢出的 css。我也尝试过将属性设置为 overflow: scroll 但仍然没有用

.inner-container {
    min-height: 400px;
    display: inline-block;
    overflow-y: auto;
    border: 3px solid #999;
    border-radius: 10px 10px 10px 10px;
}

#first-container {
    height: 70%;
    width: 60%;
    padding-top:5px;
    padding-left:5px;
    margin-left: 79px;
    margin-top: 15px;
}

#second-container {
    height: 70%;
    width: 22%;
    padding-top:5px;
    padding-left:5px;
}

将CSS应用于html

<div id="first-container" class="inner-container">

    </div>

    <div id="second-container" class="inner-container">

这就是我用 json 响应填充第一个容器的方式

if (xhr.status === 200) {
    var json = JSON.parse(response.target.responseText);
    var first_container = document.getElementById('first-container');
        ...
}
first_container.innerHTML = first;

如何在我的 div 上强制滚动条是我的挑战。

Answer 1

.inner-container {
  display: inline-block;
  border: 3px solid #999;
  border-radius: 10px;
  padding: 5px 15px;
  box-sizing: border-box;
  vertical-align: top;
  overflow-y: auto;
}

#first {
  width: 50%;
  margin-right: 15px;
  max-height: 400px;
}

#second {
  width: 30%;
  max-height: 400px;
}

<div class="inner-container" id="first">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod sodales fringilla. Sed condimentum elit non urna ultricies, vitae sollicitudin lectus convallis. Cras ut dolor eget sapien auctor facilisis ut vel neque. Etiam vel nisl ex. Praesent quis euismod dui, sit amet euismod lacus. Aliquam vitae arcu at sapien mollis cursus. Morbi ultrices, urna in imperdiet venenatis, massa elit blandit mauris, ac egestas massa elit ut purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque purus, tincidunt eget leo ut, lacinia volutpat velit. Aenean cursus nibh blandit, feugiat purus et, euismod odio. Vestibulum ac pharetra ex.</p>
	<p>Morbi id eros tempus, malesuada nisi eu, auctor est. Proin interdum mauris sed velit consequat, eget lacinia velit mollis. Maecenas vitae diam id dolor suscipit maximus. Nam nec leo imperdiet, feugiat est non, euismod lacus. Sed sollicitudin nec risus vitae consectetur. Donec maximus nisi sollicitudin turpis dapibus, dapibus gravida sapien malesuada. Praesent at cursus odio. Donec porttitor convallis magna, ac porttitor lacus pharetra sit amet. In dictum erat at auctor dapibus. Quisque ut elit elementum, volutpat tortor in, egestas tortor. Nunc iaculis ornare congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent dolor odio, elementum a ipsum ut, sollicitudin varius metus.</p>
	<p>Etiam nec elit nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla a viverra nunc. Donec placerat metus ligula, ut imperdiet ipsum hendrerit id. Etiam at porta nisl, in sodales est. Sed eget nunc mauris. Aenean vehicula dolor metus, eget aliquet nunc cursus sit amet. Maecenas tempus mi sit amet nisl molestie, in efficitur eros euismod. Nam in dictum nisi.</p>
	<p>Vestibulum tempor nisi volutpat sapien vehicula pulvinar. Curabitur in risus ut felis euismod ultricies id et nisi. Nullam quis laoreet risus. Duis dui mauris, interdum eget congue sollicitudin, dapibus id nunc. Proin placerat orci a suscipit auctor. Proin at vulputate odio. Duis porttitor libero viverra neque suscipit tincidunt. Integer eu pellentesque orci, tempus ullamcorper lectus. Ut convallis libero eu sagittis aliquam. Integer efficitur dolor augue, at elementum purus consectetur ac. Quisque vel congue felis. Vestibulum dolor justo, dapibus aliquam nulla at, condimentum sodales justo. Nullam consectetur luctus nunc, id sodales felis pellentesque eu. Quisque quis pharetra diam, eget sollicitudin urna.</p>
	<p>Donec lorem tortor, congue non sem a, malesuada cursus nunc. Sed tristique odio odio, eget fermentum velit suscipit a. Maecenas interdum mi a lectus consectetur, ac lacinia elit aliquet. Praesent turpis sapien, ultricies a risus id, sollicitudin varius urna. Nam sed ligula rutrum, bibendum sem eu, posuere odio. Cras pharetra dolor vitae mattis tincidunt. Ut dignissim tellus et purus ultricies rutrum. Phasellus id posuere dui. Proin ex neque, varius et nisi at, malesuada semper erat. Vestibulum accumsan vulputate massa sit amet euismod. Curabitur vulputate mattis tellus at suscipit. Sed a congue lacus, ut pulvinar nibh. Aenean porttitor ipsum dui, et pellentesque erat posuere in. Curabitur nulla massa, varius at porta sed, sodales at leo.</p>
</div>

<div class="inner-container" id="second">
	<p>Morbi id eros tempus, malesuada nisi eu, auctor est. Proin interdum mauris sed velit consequat, eget lacinia velit mollis. Maecenas vitae diam id dolor suscipit maximus. Nam nec leo imperdiet, feugiat est non, euismod lacus. Sed sollicitudin nec risus vitae consectetur. Donec maximus nisi sollicitudin turpis dapibus, dapibus gravida sapien malesuada. Praesent at cursus odio. Donec porttitor convallis magna, ac porttitor lacus pharetra sit amet. In dictum erat at auctor dapibus. Quisque ut elit elementum, volutpat tortor in, egestas tortor. Nunc iaculis ornare congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent dolor odio, elementum a ipsum ut, sollicitudin varius metus.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod sodales fringilla. Sed condimentum elit non urna ultricies, vitae sollicitudin lectus convallis. Cras ut dolor eget sapien auctor facilisis ut vel neque. Etiam vel nisl ex. Praesent quis euismod dui, sit amet euismod lacus. Aliquam vitae arcu at sapien mollis cursus. Morbi ultrices, urna in imperdiet venenatis, massa elit blandit mauris, ac egestas massa elit ut purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque purus, tincidunt eget leo ut, lacinia volutpat velit. Aenean cursus nibh blandit, feugiat purus et, euismod odio. Vestibulum ac pharetra ex.</p>
	<p>Vestibulum tempor nisi volutpat sapien vehicula pulvinar. Curabitur in risus ut felis euismod ultricies id et nisi. Nullam quis laoreet risus. Duis dui mauris, interdum eget congue sollicitudin, dapibus id nunc. Proin placerat orci a suscipit auctor. Proin at vulputate odio. Duis porttitor libero viverra neque suscipit tincidunt. Integer eu pellentesque orci, tempus ullamcorper lectus. Ut convallis libero eu sagittis aliquam. Integer efficitur dolor augue, at elementum purus consectetur ac. Quisque vel congue felis. Vestibulum dolor justo, dapibus aliquam nulla at, condimentum sodales justo. Nullam consectetur luctus nunc, id sodales felis pellentesque eu. Quisque quis pharetra diam, eget sollicitudin urna.</p>
</div>