溢出：滚动阻止滑块 gif 显示

Question

我添加了一个带有滑出表单的浮动 gif，以捕获潜在客户信息。它工作得很好，但在分辨率较低的屏幕上，表单会被截断，所以我想添加一个滚动条。但是当我向表单添加滚动条时，gif 不会变得可见。

正在使用的CSS

/*slide-out-div */
 .slide-out-div {overflow:scroll;padding: 20px;background: #ccc; border:1px solid black;width:250px;}  

HTML格式

<div class="slide-out-div">

网站：www.dealerclick.com

Answer 1

我相信您知道这里的问题是您将“句柄”绝对定位在表单容器右侧的负数。因此，当您像我假设的那样将溢出设置为自动（或滚动）时，它将隐藏句柄。

这不是错误，这是 css 应该工作的方式。虽然有几种方法可以解决这个问题，但我认为最好的方法是将 overflow: auto 添加到 .slide-out-div form 以便只有表单有滚动条（当你这样做时，你会看到你设置的宽度太也很窄）。

将溢出设置为自动是此处的方法，因为将溢出设置为滚动会强制滚动条，即使它们不是必需的，这不是良好的用户体验实践。

这一切都很好，但这里的另一个问题是，当您设置overflow: auto 并且页面不够高时，由于 div 具有固定的位置，它仍然无法按您想要的方式工作。所以真正解决这个问题的最好方法是使用一点 JS 来检测窗口高度，如下所示：

var window_height = window.innerHeight;
if (window_height < 668) {
   $('.slide-out-div form').css('overflow', 'scroll');
}

它的作用是检查窗口高度是否太小而无法显示表单的完整高度以及它与顶部的偏移量（在您的页面上为 668 像素），如果是，则添加滚动条。如果没有，则没有滚动条，也没有问题。