3

客户的网站设计是深青色的,他不喜欢滚动条,因为它破坏了其余的风格。他还希望我在没有第三方库的情况下这样做,并且希望以一种他可以理解的方式进行。所以我能想到的唯一方法是创建一个 div,将其设置为position: absolute;,与主题的其余部分相同的背景颜色,然后进行设置opacity: 0.8;,使其看起来更好地“混合”。

他对结果很满意,因为它适用于所有浏览器,当他第一次看到它时,他认为我什至创建了自己的滚动条。然而问题是,如果一个人想要真正点击滚动条,他们不能,因为它上面有一个 div。有什么方法可以让 div 可见,但是所有的点击和悬停以及所有内容都通过它进入下一个 div?在滚动条上方时滚动也不起作用,因为我在与实际具有滚动条的真实 div 重叠的 div 中。

任何帮助是极大的赞赏。

编辑:添加图像以显示我的意思,滚动条上方只有一个 div 以将其与环境的其余部分“混合”,但是当您将鼠标悬停在滚动条上时,它会对 div 执行所有操作那是重叠的,使滚动条不再起作用,直到你回到它的实际 div 中。

Edit2:更新的图像

在此处输入图像描述

4

2 回答 2

1

这不是您希望的答案,但我认为不可能让颜色覆盖在滚动条上持续存在并使其在所有浏览器中都起作用。

在 Chrome 中设置z-index: -1背景可以满足您的要求,但在 Firefox 中,滚动条保持白色。

http://jsfiddle.net/LrEpm/1/

火狐浏览器如下图。在 Chrome 中,滚动条在不使用时会消失,并在青色背景下保持功能

在此处输入图像描述

铬合金:

在此处输入图像描述

于 2013-08-24T03:18:14.150 回答
0

在 CSS 中创建一个类并将其应用于您希望能够单击的任何元素...

.avoid-clicks { pointer-events: none; }
  • pointer-events: none阻止指定 HTML 元素上的所有单击、状态和光标选项
  • 指针事件:继承将使用元素父级的指针事件值
  • 指针事件:自动恢复默认功能。
于 2017-10-16T03:07:34.230 回答