我想构建一个页面，当用户向下或向上滚动时，用户立即被带到下一个完整的高分区。 （“跳转滚动”效果的工作示例我的意思是：Affinity Photo & Designer
我用这种方式构建了基本的html：
<div class="flex violet">
<div class="col-6 element green">Box 1</div>
<div class="col-6 element green">Box 2</div>
<div class="col-6 element green">Box 4</div>
<div class="col-6 element green">Box 3</div>
<div class="col-6 element green">Box 5</div>
<div class="col-6 element green">Box 6</div>
</div>
<div class="flex green">
<div class="col-6 element violet">Box 1</div>
<div class="col-6 element violet">Box 2</div>
<div class="col-6 element violet">Box 3</div>
<div class="col-6 element violet">Box 4</div>
<div class="col-6 element violet">Box 5</div>
<div class="col-6 element violet">Box 6</div>
</div>
flex div的高度为css：flex {width:100vh;}。
如何使用JavaScript重建此效果？请给我一些建议。