css 左右布局各自滚动

CSS 左右布局让我们在网页设计中可以更加灵活的分配页面空间，同时也让页面呈现出更多的信息。但是，有时候我们需要让左右两个部分同时滚动，让用户更加便捷的查看页面内容。那么，该如何实现左右布局各自滚动呢？

/* 容器 */.wrapper {
    display: flex;
    height: 100vh;
    overflow: hidden;
}
/* 左边部分 */.left {
    width: 50%;
    height: 100%;
    overflow-y: auto;
}
/* 右边部分 */.right {
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
/* 右边滚动区域 */.scroll-area {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow-y: auto;
}
/* 右边内容区域 */.content {
    width: 100%;
    height: 2000px;
}
    

上述代码实现了一个左右布局各自滚动的效果。其中，我们通过给左边部分设置overflow-y: auto; 告诉浏览器当左边内容超出容器高度时出现滚动条；通过给右边部分设置overflow: hidden; 隐藏了浏览器默认的滚动条。

在右边部分，我们添加了一个滚动区域.scroll-area，通过设置position: absolute; 脱离文本流，并设置width: 100%; height: 100%; top: 0; left: 0; 让其占据整个右边的区域。同时，我们给其设置overflow-y: auto; ，让其当内容高度超过容器时出现滚动条。

最后，我们再给右边区域中的内容区域.content设置一个较长的高度height: 2000px; ，来测试左右布局各自滚动的效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！