如果在视口中部分可见，如何对div设置自动滚动功能？

Question

我有一个包含一些图像的div（全屏尺寸）列表，如果在视口中可见率超过50％并且用户停止了滚动，我想做的就是使其自动滚动到下一个。如果小于50％，我想自动滚动回上一个div。

对于这个项目，我使用的是Vanilla js，但如果需要，我也可以在必要时使用jquery解决方案。

非常感谢您的帮助。

   <div id="wrapper">
    <div class="container prjct">
            <div class="projects" id="project1">
                <div class="imgslide noselect">
                </div>
            </div>
        </div>
        <div class="container prjct">
            <div class="projects" id="project2">
                <div class="imgslide noselect">
                </div>
            </div>
        </div>
        <div class="container prjct">
            <div class="projects" id="project3">
                <div class="imgslide noselect">
                </div>
            </div>
        </div>
    </div>