Question

我有点卡在我正在做的事情上，并希望有人可以帮助我。

我正在制作的页面涉及使用我在CSS Tricks上找到的这段代码水平滚动。

    $(function() {

       $("body.story").mousewheel(function(event, delta) {

          this.scrollLeft -= (delta * 30);

          event.preventDefault();

       });

    });

网站本身涉及不同页面的不同布局，因此不同的身体类别。我创建的导航是使用复选框hack技术，其高度将超过页面的100％。因此，如果任何人仍未关注复选框导航未被使用，因此未选中我想运行上面的代码并允许页面水平滚动但是当复选框被选中并且高大的菜单显示我想要禁用水平滚动，然后恢复为常规垂直滚动。

如果有人需要一个演示来查看我想要在该项目中获得的内容位于http://projects.minml.co/baptistella2

复选框的html如下

<input type="checkbox" id="toggle" />
<label for="toggle"></label>

我知道我需要使用一个事件处理程序，但我不知道从哪里开始，并希望得到帮助。

由于

Answer 1

如果我理解正确，你想切换＆＃34;模式＆＃34;在飞行中滚动。在这种情况下，我建议存储一个简单的变量，比如＆＃34; scrollMode＆＃34;并根据在＆＃34;水平＆＃34;之间打开和关闭的菜单翻转它。和＆＃34;垂直＆＃34;。然后，您的mousewheel事件代码会在执行任何自定义行为之前检查该变量。

Answer 2

单击导航栏时，只需删除preventDefault即可。

Answer 3

我不确定我是否完全遵循。根据我的理解，当选中复选框时，您想要禁用水平（y轴）滚动当它没有被检查时你想要允许水平滚动。如果是这种情况，我会使用jquery来更改css overflow-y属性

   if($('#toggle').is(':checked'))
    {
        $('body.story').css('overflow-y' , 'hidden');
    }else{
        ('body.story').css('overflow-y' , 'scroll');
    }

或

$('#toggle').on('click', function(){
    ('body.story').toggleClass('no-scroll');
});

然后在你的css中创建一个类no-scroll并设置overflow-y：hidden

取消选中复选框时水平滚动

3 个答案: