javascript - 使用 jQuery 或 css overflow hidden 的内容

Question

尝试对其进行编辑，以便当用户单击内容时，div 会向右移动。将其与 Marginleft 40% 和宽度 60% 一起使用即可。然而，它压缩了我想看到的照片。所以我只是将边距提高 40%，让其余部分溢出页面(移动端)。我的问题是，当我尝试溢出隐藏正文和 HTML 时。它没有捕捉到任何东西，页面仍然可以向右滚动。我还尝试了 scrollLock/scrollLeft 类型的选项，但都不起作用。知道解决方案吗？

这是 Jfiddle 示例:https://jsfiddle.net/56hxy/112/

$(function() { 
    var contentToggle = 0; 

    $('#content').on('click', function() { 

        if (contentToggle == 0) { 
            $('#content').animate({
                marginLeft: '40%',
            })  

            contentToggle = 1; 
        }
        else if (contentToggle == 1) {
            $('#content').animate({
                marginLeft: 0,
            }) 
            contentToggle = 0; 
        }

    }) 
})

Answer 1

您可以在 body 元素或容器中应用 overflow: hidden，如下所示:

body{
    width: 100%;
    overflow: hidden;
}

fiddle :https://jsfiddle.net/lmgonzalves/56hxy/113/