Html 防止在100%宽度的页面上水平拖动滚动

我有一个页面设计，它使用CSS关键帧使包含页面内容的

最小高度：100%

元素从右侧滑入。一旦元素已设置动画到其最终位置，就可以通过选择并拖动文本来水平“拖动滚动”页面，这是我想要避免的

和

元素都设置为

溢出-x:hidden，用于防止滚动条，但仍允许滚动功能。我确实需要用户能够垂直滚动
元素

我假设问题是由关键帧动画中的初始
translateX
值引起的，但我不确定如何防止水平拖动滚动

下面是问题的演示

非常感谢您的任何意见。
也许是javascript解决方案？以下情况如何：

function bindEvent(e, eventName, callback) {
    if(e.addEventListener) // new browsers
        e.addEventListener(eventName, callback, false);
    else if(e.attachEvent) // IE
        e.attachEvent('on'+ eventName, callback);
};

bindEvent(document.body, 'scroll', function(e) {
    document.body.scrollLeft = 0;
});