在HTML中拆分页面滚动行为

Question

所以我有一个分为2列的页面。左栏有可扩展的表单，这些表单很长，可以询问用户可选的产品首选项。在页面的右侧有一个更短的“联系方式”表单。

联系详细信息表单是必填表单，而所有左侧产品首选项表单都是可选的。行为的想法是，当用户向下滚动以完成左列可选表单时，页面将仅滚动左列 - 右列中显示的联系人详细信息表单始终保持原位。我在实现这个问题时遇到了麻烦，我还没有找到解决方案，也没有找到任何在线拆分列行为的页面示例。

有任何建议/意见吗？ 谢谢！

Answer 1

根据布局的相关程度，您可以使用css固定定位，以便在页面向下滚动时，右栏保持在同一位置。

Sample.

Answer 2

您可以将较长（左）列的内容放在容器div中，并使用overflow属性使该div可以独立滚动。

Here's a sample