元素水平滚动

Question

我想了解如何使用elementor或WordPress插件创建动画水平滚动。

这是开发版本的链接。 Click here

我已将此代码添加到页面以启用水平滚动。现在我有点卡住了，我想按部分而不是正常的滚动来滚动。

.elementor-inner{
    width:100vh;
    height:100vw;
    overflow-x:hidden;
    overflow-y: scroll;
    transform: rotate(-90deg) translateX(-100vh);
    transform-origin: top left; 
    position:absolute;
    scrollbar-width:none;
    -ms-overflow-style:none;
    /* We set the scroll snapping */
    scroll-snap-type: x mandatory;
    /* Necessary for mobile scrolling */
    -webkit-overflow-scrolling: touch;
    /* For layout purposes */
    display: flex;
    /* To allow horizontal scrolling */
    overflow-x: scroll;
}

.elementor-section-wrap{
    transform: rotate(90deg) translateY(-100vh);
    transform-origin: top left; 
    display:flex;
    flex-direction: row;
    width: 300vw;
}

.section{ width:100vw; height:10vh;
    scroll-snap-align: start;
}

::-webkit-scrollbar{
    display:none
}

是否可以仅使用CSS3做到这一点，还是必须集成一些JavaScript？