overflow：scroll阻止滑块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，这样只有表单有滚动条（当你这样做时，你会看到你的设定宽度也太窄了。

设置溢出到自动是这里的方法因为设置溢出滚动强制滚动条，即使它们不是必需的，这不是很好的ux练习。

这一切都很好，但另一个问题是当你设置overflow: auto并且页面不够高时，因为div有一个固定的位置，它仍然不会像你一样工作想。所以真正解决这个问题的最佳方法是使用一点JS来检测窗口高度，如下所示：

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

这样做是检查窗口高度是否太小而无法显示窗体的完整高度加上它从顶部偏移（页面上的偏移为668px），如果是，则添加滚动条。如果没有，没有滚动条，没有问题。