HTML和CSS：单击按钮后，使用垂直滚动条水平拆分页面

Question

<div class="upper">
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>

    <input type="button" name="answer" value="Show Div" onclick="showDiv()" />
</div>

<div id="welcomeDiv"  style="display:none;" class="lower" > WELCOME
   <p>toty</p>
</div>

我想在单击按钮时显示拆分

Answer 1

我认为您正在寻找类似this

HTML

<div id="upper-section">

        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>        
      <input type="button" name="answer" value="Show Div" onclick="showDiv()" />
</div>
<div class="lower" id="welcomeDiv"  style="display:none;"></div>

JS

function showDiv() {
   document.getElementById('upper-section').classList.add("upper");
   document.getElementById('welcomeDiv').style.display = "block";
}