# 通用样式 ## 使用方式 > 需要先引入 `amos-framework` 主样式。 ```js
内容
``` ## 通用滚动条 采用 `pretty-scrollbar` 创建通用交互滚动条，当鼠标悬浮在滚动区域时，才显示滚动条。仅 `chrome` 浏览器起效。 ```scss @import '~amos-framework/lib/styles/mixins/scrollbar.scss'; // scrollbar color $scrollOutColor: rgba(#dedede, 0.3); $scrollInnerColor: rgba(black, 0.1); /** *定义滚动条样式 圆角和阴影不需要则传入null * 1、$outColor -- 滚动条颜色 * 2、$innerColor -- 滑块颜色 * 3、$height -- 滚动条宽高、圆角 * 4、$width * 5、$radius * 6、$shadow -- 阴影 * example: * .my { @include scrollbar(5px, 8px, $scrollOutColor, $scrollInnerColor); } */ @mixin scrollbar($width: 10px, $height: 10px, $outColor: $bgBarColor, $innerColor: $bgThumbColor, $radius: 5px, $shadow: null); /** *定义通用交互滚动条样式 圆角和阴影不需要则传入null * 1、$outColor -- 滚动条颜色 * 2、$innerColor -- 滑块颜色 * 3、$height -- 滚动条宽高、圆角 * 4、$width * 5、$radius * 6、$shadow -- 阴影 * example: * .my { @include pretty-scrollbar(5px, 8px, $scrollOutColor, $scrollInnerColor); } */ @mixin pretty-scrollbar($width: 10px, $height: 10px, $outColor: $bgBarColor, $innerColor: $bgThumbColor, $radius: 5px, $shadow: null) /** * 定义某个选择器之下的通用交互滚动条样式 圆角和阴影不需要则传入null * example: * - 直接在 body 之下： * @include body-scrollbar(5px, 8px); * - 在某个选择器之下： * .my { @include body-scrollbar(5px, 8px); } */ @mixin body-scrollbar($width: 10px, $height: 10px, $outColor: $bgBarColor, $innerColor: $bgThumbColor, $radius: 5px, $shadow: null) ``` 版本 1.5.6 之下滚动条采用如下方式解决抖动： > 注意：`pretty-scrollbar` 默认给父节点添加了 `overflow: overlay;` 属性，以防左侧界面抖动。但是，该方式不是最佳的解决方案，应该采用嵌套父节点，在父节点统一采用 `margin-left: calc(100vw - 100%)` 实现。 > 由于 父节点上层节点已经脱离控制，应由外部控制。下一阶段，可以添加一个组件，由该组件控制所有。 - 中文 [overflow: overlay](https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow#值) - 英文 [overflow: overlay](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#Values) - 默认提供 `amos-pretty-scrollbar` 样式，采用 `pretty-scrollbar` 创建滚动条。可直接引入即可。 版本 1.5.6 之后，滚动条的显隐，采用 `visibility` 控制显影，默认会占据位置。 ## 案例演示 切换默认样式名，查看源码中，目标元素样式 ---demo ```js import { Select } from 'amos-framework'; const styles = [ 'f-10', 'f-12', 'f-13', 'f-14', 'f-15', 'f-16', 'f-17', 'f-18', 'f-19', 'f-20', 'f-24', 'f-28', 'f-32', 'p-5', 'p-10', 'p-15', 'p-20', 'pt-5', 'pt-10', 'pt-15', 'pt-20', 'pl-5', 'pl-10', 'pl-15', 'pl-20', 'pr-5', 'pr-10', 'pr-15', 'pr-20', 'pb-5', 'pb-10', 'pb-15', 'pb-20', 'm-5', 'm-10', 'm-15', 'mt-20', 'mt-5', 'mt-10', 'mt-15', 'mt-20', 'ml-5', 'ml-10', 'ml-15', 'ml-20', 'mr-5', 'mr-10', 'mr-15', 'mr-20', 'mb-5', 'mb-10', 'mb-15', 'mb-20', 'w-50', 'w-80', 'w-100', 'w-120', 'w-150', 'w-180', 'w-200', 'f-l', 'f-r', 'clearfix', 't-o', 'none', 'cursor-d', 'cursor-t', 'cursor-h', 'cursor-m', 'cursor-p', 'center', 't-i-1', 't-i-2', 'border-0', 'border-l-0', 'border-r-0', 'border-t-0', 'border-b-0', 'border-0-lr', 'border-0-tb', 'flex-vh-center', 'flex-v-center', 'flex-h-center', 'center-block', 'img-wh', 'img-circle' ]; class Demo extends Component { state = { cls: '' }; onChange = (value, item) => { this.setState({ cls: value }); } render() { const { iptCopy } = this.state; return (