溢出:滚动阻止滑动块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

这里的问题，我相信你知道，是你有"句柄"绝对负定位到表单容器的右边。所以当你将overflow设置为auto(或scroll)时，它会隐藏句柄。

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

将overflow设置为auto，因为将overflow设置为scroll会强制滚动条，即使它们不是必需的，这不是好的用户体验实践。

这一切都很好，但这里的另一个问题是，当你设置overflow: auto和页面不够高，因为div有一个固定的位置，它仍然不会按你想要的方式工作。因此，解决这个问题的最好方法是使用一点JS来检测窗口高度，像这样:

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

的作用是检查窗口的高度是否太小，不足以显示表单的全部高度以及它与顶部的偏移量(在您的页面上是668px)，如果是，则添加滚动条。如果没有，没有滚动条，没有问题。