使用 jQuery 或 css 隐藏溢出的内容答案

【问题标题】：hide overflowed content with jQuery or css使用 jQuery 或 css 隐藏溢出的内容
【发布时间】：2019-04-27 22:30:50
【问题描述】：

尝试对此进行编辑，以便当用户单击内容时，div 会向右移动。将此与 Marginleft 40% 和 width 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; 
        }

    }) 
})

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

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

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

小提琴：https://jsfiddle.net/lmgonzalves/56hxy/113/

【讨论】：

它隐藏了我在 y 上的内容，但 1. 我仍然可以滚动 Y 和 2. 内容在容器外仍然可见。
但是这个小提琴不行吗？所以你应该创建一个新的小提琴来显示你的问题。