HTML实现左侧内容可滚动,右侧列表固定布局

2023年6月20日发(作者：)

HTML实现左侧内容可滚动，右侧列表固定布局⼀、前⾔：最近在项⽬中，遇到⼀个页⾯布局问题，说是布局，其实就是实现⼀个新闻页⾯的交互问题；功能⽐较常见，就是左侧的内容部分可以滚动，右侧的列表固定定位。这个功能⽐较常见，⽬前已实现，就是布局+JS配合实现该效果；先上图，⼤概就是下图右侧列表随滚动条固定在右侧，左侧可以滚动的效果，当滚动条接近底部时，为了使右侧列表不覆盖底部，需要⽤js处理，设置右侧列表的bottom值，具体请看代码。

⼆， 代码部分，由于是公司项⽬，没有把源代码拿过来，在这⾥我写了⼀个demo，来测试该功能，页⾯结构是⼀样的。html结构

页⾯头部

新闻列表

⼩节：关于htmL页⾯结构，就是头部、底部、内容部分，结构⽐较清晰；我们的内容部分的左侧是class类为cont-left的div元素，右侧是class类为list-right的div元素；我们需要固定的就是list-right的div元素。css样式⼩节：关于css样式设置，是有⼀定的技巧的，对于内容部分实现左右两栏布局，⽅式有多种，这⾥需要⽤到浮动，这样我们就不⽤再设置left-right容器的left值，省去很多⿇烦，然后给内容的⽗容器设置position：relative; 滚动到⼀定⾼度时，我们给box-fixed容器添加tab_fix类固定，当滚动条接近底部时，为了不让固定的列表容器覆盖底部，可以使⽤绝对定位，设置bottom值，就是添加tab_fix_bottom类。js部分三、总结：功能很常见，主要⽬的是做个笔记。当然，相信实现⽅法不⽌⼀种，如果⼤家遇到更好的⽅法，可以⼀起学习。

2023年6月20日发(作者：)

HTML实现左侧内容可滚动，右侧列表固定布局⼀、前⾔：最近在项⽬中，遇到⼀个页⾯布局问题，说是布局，其实就是实现⼀个新闻页⾯的交互问题；功能⽐较常见，就是左侧的内容部分可以滚动，右侧的列表固定定位。这个功能⽐较常见，⽬前已实现，就是布局+JS配合实现该效果；先上图，⼤概就是下图右侧列表随滚动条固定在右侧，左侧可以滚动的效果，当滚动条接近底部时，为了使右侧列表不覆盖底部，需要⽤js处理，设置右侧列表的bottom值，具体请看代码。

⼆， 代码部分，由于是公司项⽬，没有把源代码拿过来，在这⾥我写了⼀个demo，来测试该功能，页⾯结构是⼀样的。html结构

页⾯头部

新闻列表

⼩节：关于htmL页⾯结构，就是头部、底部、内容部分，结构⽐较清晰；我们的内容部分的左侧是class类为cont-left的div元素，右侧是class类为list-right的div元素；我们需要固定的就是list-right的div元素。css样式⼩节：关于css样式设置，是有⼀定的技巧的，对于内容部分实现左右两栏布局，⽅式有多种，这⾥需要⽤到浮动，这样我们就不⽤再设置left-right容器的left值，省去很多⿇烦，然后给内容的⽗容器设置position：relative; 滚动到⼀定⾼度时，我们给box-fixed容器添加tab_fix类固定，当滚动条接近底部时，为了不让固定的列表容器覆盖底部，可以使⽤绝对定位，设置bottom值，就是添加tab_fix_bottom类。js部分三、总结：功能很常见，主要⽬的是做个笔记。当然，相信实现⽅法不⽌⼀种，如果⼤家遇到更好的⽅法，可以⼀起学习。