CSS css滚动条宽度和圆形效果

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18961998/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 00:29:36  来源:igfitidea点击:

css scrollbar width and round effect

css

提问by rushd

is there a way where I can set the width of the default width of the scroll bar in a dive ? what I have is a div with auto scroll bar. what I want to set the width of the scroll bar as a thin line and hide the both top and bottom arrow marks of this.

有没有办法在潜水中设置滚动条默认宽度的宽度?我拥有的是一个带有自动滚动条的 div。我想将滚动条的宽度设置为一条细线并隐藏它的顶部和底部箭头标记。

回答by Jean-Paul

You can use CSS's WebKit functionalities:

您可以使用 CSS 的 WebKit 功能:

You can read about it here.

你可以在这里阅读它。

For example:

例如:

::-webkit-scrollbar {
width: 12px;
}

::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px     rgba(0,0,0,0.3); 
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px     rgba(0,0,0,0.5); 
}

Would create an iOS-like scrollbar (DEMO)

将创建一个类似 iOS 的滚动条 ( DEMO)

Good luck

祝你好运

回答by caramba

you should have a look at this. works awesome in every browser.

你应该看看这个。在每个浏览器中都很棒。

It is very easy to use and change all possible style from scroll (colors, widths and what ever you want).

它非常易于使用并从滚动中更改所有可能的样式(颜色、宽度以及您想要的任何样式)。

http://manos.malihu.gr/jquery-custom-content-scroller/

http://manos.malihu.gr/jquery-custom-content-scroller/

--> direct link to demo page

--> 直接链接到演示页面

回答by bmurauer

The scroll bars are browser/toolkit dependent and can't be controlled directly by CSS. You could implement your own scrollbars using JavaScript, but that is a lot of work.

滚动条依赖于浏览器/工具包,不能由 CSS 直接控制。您可以使用 JavaScript 实现自己的滚动条,但这需要大量工作。

回答by Suneku

This link : http://www.noupe.com/javascript/30-javascriptajax-techniques-for-sliders-scrollers-and-scrollbars.html

此链接:http: //www.noupe.com/javascript/30-javascriptajax-techniques-for-sliders-scrollers-and-scrollbars.html

should get you started on JavaScript/Ajax scrollbars. If you are interested of course.

应该让您开始使用 JavaScript/Ajax 滚动条。如果你有兴趣当然可以。