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

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

我想您正在寻找类似

HTML

---

请澄清您的具体问题或添加其他详细信息，以突出显示您所需的内容。正如目前所写的，很难说清楚你在问什么。嗨，请读一篇，如何创建一个sir，请参考我的例子，请帮助我，因为我是一个新的堆栈溢出卡住了，请这样做，但我希望按钮是在上分区，这样当我点击它时，下分区应该显示…谢谢！！！已经做了一些修改，现在输出对我来说是好的…不客气。

<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>

<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>

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