Question

我的页面设计使用CSS关键帧来制作包含页面内容的min-height: 100% <section>元素从右侧滑入。 一旦元素动画到最终位置，就可以＆＃34;拖动滚动＆＃34;通过选择和拖动文本水平页面，我想避免。

<html>和<body>元素都设置为overflow-x: hidden;，用于阻止滚动条但仍允许滚动功能。我确实需要用户能够垂直滚动<section>元素。

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

这里a jsfiddle证明了这个问题。

我感谢任何意见。

Answer 1

也许是一个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;
});

防止在100％宽度页面上水平拖动滚动

1 个答案: