滑动穿透(锁body)的那些事儿

滑动穿透(锁body)终极探索

滑动穿透(锁body)是指当页面出现浮层时，滑动浮层的内容，正常情况下预期应该是浮层下边的内容不会滚动；然而事实并非如此。这是一种常见的现象，通常是由于浮层元素没有设置overflow: hidden属性造成的。当浮层元素没有设置overflow: hidden属性时，浮层的内容就会溢出浮层元素的边界，并导致浮层下边的内容也被滚动。

为了解决这个问题，我们可以给浮层元素设置overflow: hidden属性。这样，浮层的内容就会被限制在浮层元素的边界内，不会溢出浮层元素的边界，也不会导致浮层下边的内容被滚动。

滑动穿透(锁body)经常被开发人员用在页面全局禁止滚动上。这是一种很常用的做法，因为当页面出现浮层时，我们通常希望用户只能滚动浮层的内容，而不能滚动浮层下边的内容。

但是，这种做法也存在一些缺点。首先，滑动穿透(锁body)会限制用户交互。当用户试图滚动页面时，他们可能会感到困惑，因为他们无法滚动页面。其次，滑动穿透(锁body)可能会导致滚动条抖动等问题。

因此，在使用滑动穿透(锁body)时，我们需要权衡利弊。如果我们希望用户只能滚动浮层的内容，而不能滚动浮层下边的内容，那么我们可以使用滑动穿透(锁body)。但是，如果我们希望用户能够滚动整个页面，那么我们就不能使用滑动穿透(锁body)。

除了滑动穿透(锁body)之外，还有一些其他的方法可以用来禁用浮层下内容的滚动。其中一种方法是使用position: fixed属性。当浮层元素使用position: fixed属性时，浮层元素就会脱离文档流，并固定在页面上。这样，浮层元素就不会影响浮层下边的内容，也不会导致浮层下边的内容被滚动。

另一种方法是使用touchmove事件。当用户在浮层元素上滑动手指时，touchmove事件就会被触发。我们可以监听touchmove事件，并在touchmove事件的回调函数中阻止页面的滚动。这样，浮层元素就可以正常滚动，而浮层下边的内容就不会被滚动。

滑动穿透(锁body)是一种常用的技巧，但它也存在一些缺点。在使用滑动穿透(锁body)时，我们需要权衡利弊。如果我们希望用户只能滚动浮层的内容，而不能滚动浮层下边的内容，那么我们可以使用滑动穿透(锁body)。但是，如果我们希望用户能够滚动整个页面，那么我们就不能使用滑动穿透(锁body)。