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

发布于 2024-12-16 21:00:25 字数 369 浏览 1 评论 0原文

我添加了一个带有滑出表单的浮动 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

原文

I've added a floating gif with a slide out form to capture lead information. it works great but with lower resolution screen the form gets cut off so I though of adding a scroll bar. But when I add a scroll bar to the form the gif does not become visible.

Css being used

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

Html form

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

web site: www.dealerclick.com

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我是男神闪亮亮 2024-12-23 21:00:25

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

这不是一个错误，这是 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');
}

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

The problem here, as I'm sure you know, is that you have the "handle" absolute positioned negatively to the right of the form container. So when you set overflow to auto (or scroll) as I assume you were, it will hide the handle.

This is not an error, it's the way css is supposed to work. Although there are a couple ways you can solve this, I think the best way is to add overflow: auto to .slide-out-div form so that only the form has the scroll bars (when you do this, you will see that your set width was too narrow as well).

Setting overflow to auto is the way to go here because setting overflow to scroll forces the scrollbars even when they are not necessary, which is not good ux practice.

This is all good and well, but the other problem here is that when you set overflow: auto and the page is not tall enough, since the div has a fixed position, it still won't work the way you want. So really the best way to take care of this issue is to use a little JS to detect window height, like this:

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

What this does is check if the window height is too small to display the full height of the form plus it's offset from the top (which on your page is 668px), and if so, adds the scroll bars. If not, no scroll bars and no problems.

回复收藏 0 原文

~没有更多了~