跨浏览器样式滚动条

发布于 12-11 04:58 字数 484 浏览 6 评论 0 原文

我知道这是 可能 IE 和 Opera

在 Chrome 和 Firefox 中如何为滚动条添加样式?

(我需要设置 overflow:scroll 样式,而不是浏览器滚动条)

我知道这可以通过 jquery

那么在检测到 FF 或 Chrome 后我是否应该拼命使用 JavaScript 呢?

I know this is possible in IE and Opera.

And what can be done to add style to scrollbar in Chrome and Firefox?

(I need to style overflow:scroll, not browser scrollbars)

I know this can be done via jquery.

So should I desperately use JavaScript after detecting FF or Chrome?

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

扫码二维码加入Web技术交流群

发布评论

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

评论(2

短暂陪伴 2024-12-18 04:58:09

如果您使用 PHP,这里的函数将在作为参数传递给该函数的类中输出所有浏览器所需的 css。然后,您在脚本的

function WriteScrollBarsStyle ($thumb_color_code,$track_color_code,$border_width='2px',$class_name='ScrollBarsColored') {echo 
    .{$class_name} {
    scrollbar-color:#{$thumb_color_code} #{$track_color_code};
    }

    .{$class_name}::-webkit-scrollbar {
    height:100%;
    }

    .{$class_name}::-webkit-scrollbar-track {
    border:{$border_width} solid #{$thumb_color_code};
    background:#{$track_color_code};
    background-color:#{$track_color_code};
    }

    .{$class_name}::-webkit-scrollbar-thumb {
    border:{$border_width} solid #{$track_color_code};
    background:#{$thumb_color_code};
    background-color:#{$thumb_color_code};
    }

    .{$class_name}::-webkit-scrollbar-thumb:hover {
    background:#{$thumb_color_code};
    background-color:#{$thumb_color_code};
    }";
}

)脚本中的 PHP :

<html><head>[...]
   <style>[...]<?php WriteScrollBarsStyle('DCAB88','950505'); ?> 
   </style>

颜色代码不需要 # :) 如果您没有处于怪异模式...

PS 我们如何粘贴带有回车符的代码并按此处的 {} 按钮?每次我尝试时,我的代码都会被截断,而且我太愚蠢或不耐烦去寻找如何处理这个非常反直觉的界面细节......

if you use PHP, here a function that will output all browser's needed css in a class passed as parameter to the function. Then you call the function in the <head><style>... section of your script. DON'T FORGET ADDING THE CLASS TO <body><html> (I don't eevn know which is the correct one; i always do the 2 because at some point I may have been led into thinking some browsers use <html> and others <body>)

function WriteScrollBarsStyle ($thumb_color_code,$track_color_code,$border_width='2px',$class_name='ScrollBarsColored') {echo 
    .{$class_name} {
    scrollbar-color:#{$thumb_color_code} #{$track_color_code};
    }

    .{$class_name}::-webkit-scrollbar {
    height:100%;
    }

    .{$class_name}::-webkit-scrollbar-track {
    border:{$border_width} solid #{$thumb_color_code};
    background:#{$track_color_code};
    background-color:#{$track_color_code};
    }

    .{$class_name}::-webkit-scrollbar-thumb {
    border:{$border_width} solid #{$track_color_code};
    background:#{$thumb_color_code};
    background-color:#{$thumb_color_code};
    }

    .{$class_name}::-webkit-scrollbar-thumb:hover {
    background:#{$thumb_color_code};
    background-color:#{$thumb_color_code};
    }";
}

HTML & PHP in your script :

<html><head>[...]
   <style>[...]<?php WriteScrollBarsStyle('DCAB88','950505'); ?> 
   </style>

No # needed to the color codes :) in case you're not in quirks mode...

P.S. How do we paste code with carriage returns pressing the {} button on here? My code gets truncated every time I try and I'm too stupid and or impatient to find how to deal with this very counter-intuitive interface detail....

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文