設置滾動條樣式

滾動條樣式：

下面是代碼：

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>CSS3自定義滾動條</title><style>header {font-family: 'Lobster', cursive;text-align: center;font-size: 25px;}#info {font-size: 18px;color: #555;text-align: center;margin-bottom: 25px;}a {color: #074E8C;}.scrollbar {margin-left: 30px;float: left;height: 300px;width: 65px;background: #F5F5F5;overflow-y: scroll;margin-bottom: 25px;}.force-overflow {min-height: 450px;}#wrapper {text-align: center;width: 500px;margin: auto;}/**  STYLE 1*/#style-1::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);border-radius: 10px;background-color: #F5F5F5;}#style-1::-webkit-scrollbar {width: 8px;background-color: #F5F5F5;}#style-1::-webkit-scrollbar-thumb {border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);background-color: #555;}/**  STYLE 2*/#style-2::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);border-radius: 10px;background-color: #F5F5F5;}#style-2::-webkit-scrollbar {width: 12px;background-color: #F5F5F5;}#style-2::-webkit-scrollbar-thumb {border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);background-color: #D62929;}/**  STYLE 3*/#style-3::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);background-color: #F5F5F5;}#style-3::-webkit-scrollbar {width: 6px;background-color: #F5F5F5;}#style-3::-webkit-scrollbar-thumb {background-color: #000000;}/**  STYLE 4*/#style-4::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);background-color: #F5F5F5;}#style-4::-webkit-scrollbar {width: 10px;background-color: #F5F5F5;}#style-4::-webkit-scrollbar-thumb {background-color: #000000;border: 2px solid #555555;}/**  STYLE 5*/#style-5::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);background-color: #F5F5F5;}#style-5::-webkit-scrollbar {width: 10px;background-color: #F5F5F5;}#style-5::-webkit-scrollbar-thumb {background-color: #0ae;background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));}/**  STYLE 6*/#style-6::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);background-color: #F5F5F5;}#style-6::-webkit-scrollbar {width: 10px;background-color: #F5F5F5;}#style-6::-webkit-scrollbar-thumb {background-color: #F90;background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent)}/**  STYLE 7*/#style-7::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);background-color: #F5F5F5;border-radius: 10px;}#style-7::-webkit-scrollbar {width: 10px;background-color: #F5F5F5;}#style-7::-webkit-scrollbar-thumb {border-radius: 10px;background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(122, 153, 217)), color-stop(0.72, rgb(73, 125, 189)), color-stop(0.86, rgb(28, 58, 148)));}/**  STYLE 8*/#style-8::-webkit-scrollbar-track {border: 1px solid black;background-color: #F5F5F5;}#style-8::-webkit-scrollbar {width: 10px;background-color: #F5F5F5;}#style-8::-webkit-scrollbar-thumb {background-color: #000000;}/**  STYLE 9*/#style-9::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);background-color: #F5F5F5;}#style-9::-webkit-scrollbar {width: 10px;background-color: #F5F5F5;}#style-9::-webkit-scrollbar-thumb {background-color: #F90;background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent)}/**  STYLE 10*/#style-10::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);background-color: #F5F5F5;border-radius: 10px;}#style-10::-webkit-scrollbar {width: 10px;background-color: #F5F5F5;}#style-10::-webkit-scrollbar-thumb {background-color: #AAA;border-radius: 10px;background-image: -webkit-linear-gradient(90deg, rgba(0, 0, 0, .2) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .2) 50%, rgba(0, 0, 0, .2) 75%, transparent 75%, transparent)}/**  STYLE 11*/#style-11::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);background-color: #F5F5F5;border-radius: 10px;}#style-11::-webkit-scrollbar {width: 10px;background-color: #F5F5F5;}#style-11::-webkit-scrollbar-thumb {background-color: #3366FF;border-radius: 10px;background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.5) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 75%, transparent 75%, transparent)}/**  STYLE 12*/#style-12::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);border-radius: 10px;background-color: #444444;}#style-12::-webkit-scrollbar {width: 12px;background-color: #F5F5F5;}#style-12::-webkit-scrollbar-thumb {border-radius: 10px;background-color: #D62929;background-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent, transparent)}/**  STYLE 13*/#style-13::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);border-radius: 10px;background-color: #CCCCCC;}#style-13::-webkit-scrollbar {width: 12px;background-color: #F5F5F5;}#style-13::-webkit-scrollbar-thumb {border-radius: 10px;background-color: #D62929;background-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent, transparent)}/**  STYLE 14*/#style-14::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);background-color: #CCCCCC;}#style-14::-webkit-scrollbar {width: 10px;background-color: #F5F5F5;}#style-14::-webkit-scrollbar-thumb {background-color: #FFF;background-image: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 25%, transparent 100%, rgba(0, 0, 0, 1) 75%, transparent)}/**  STYLE 15*/#style-15::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);background-color: #F5F5F5;border-radius: 10px;}#style-15::-webkit-scrollbar {width: 10px;background-color: #F5F5F5;}#style-15::-webkit-scrollbar-thumb {border-radius: 10px;background-color: #FFF;background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#4D9C41), to(#19911D), color-stop(.6, #54DE5D))}/**  STYLE 16*/#style-16::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);background-color: #F5F5F5;border-radius: 10px;}#style-16::-webkit-scrollbar {width: 10px;background-color: #F5F5F5;}#style-16::-webkit-scrollbar-thumb {border-radius: 10px;background-color: #FFF;background-image: -webkit-linear-gradient(top, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);}</style>
</head><body><div id="wrapper"><div class="scrollbar" id="style-default"><div class="force-overflow"></div></div><div class="scrollbar" id="style-1"><div class="force-overflow"></div></div><div class="scrollbar" id="style-2"><div class="force-overflow"></div></div><div class="scrollbar" id="style-3"><div class="force-overflow"></div></div><div class="scrollbar" id="style-4"><div class="force-overflow"></div></div><div class="scrollbar" id="style-5"><div class="force-overflow"></div></div><div class="scrollbar" id="style-6"><div class="force-overflow"></div></div><div class="scrollbar" id="style-7"><div class="force-overflow"></div></div><div class="scrollbar" id="style-8"><div class="force-overflow"></div></div><div class="scrollbar" id="style-9"><div class="force-overflow"></div></div><div class="scrollbar" id="style-10"><div class="force-overflow"></div></div><div class="scrollbar" id="style-11"><div class="force-overflow"></div></div><div class="scrollbar" id="style-13"><div class="force-overflow"></div></div><div class="scrollbar" id="style-14"><div class="force-overflow"></div></div><div class="scrollbar" id="style-15"><div class="force-overflow"></div></div></div>
</body></html>

滾動條到右邊

代碼：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><style>#son {direction: ltr;}#father {width: 400px;height: 200px;border: 1px solid aqua;overflow-y: scroll;direction: rtl;}.item {height: 80px;border: 1px solid #eee;}</style><body><div id="father"><div id="son"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div></div></body></html>

滾動條在上面

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo-2</title><style>#son {width: 500px;transform: scaleY(-1);}#father {transform: scaleY(-1);width: 300px;overflow-x: scroll;}</style>
</head><body><div id="father"><div id="son">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div></div></body>
<script>
</script></html>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/166391.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/166391.shtml
英文地址，請注明出處：http://en.pswp.cn/news/166391.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

亞馬遜云科技向量數據庫助力生成式AI成功落地實踐探秘（二）

亞馬遜云科技向量數據庫助力生成式AI成功落地實踐探秘（二）

向量數據庫選擇哪種近似搜索算法&#xff0c;選擇合適的集群規模以及集群設置調優對于知識庫的讀寫性能也十分關鍵&#xff0c;主要需要考慮以下幾個方面&#xff1a; 向量數據庫算法選擇 在 OpenSearch 里&#xff0c;提供了兩種 k-NN 的算法&#xff1a;HNSW (Hierarchical…
閱讀更多...
基于STM32設計的智能防盜單車鎖(馬蹄鎖)設計_升級版

基于STM32設計的智能防盜單車鎖(馬蹄鎖)設計_升級版

1. 前言 隨著共享單車和自行車的普及，人們對自行車的安全和便利性提出了更高的要求。智能防盜馬蹄鎖是一種基于 STM32 單片機的智能鎖，可以通過手機藍牙實現開鎖和關鎖控制，同時具備 GPRS 防盜預警功能，提高了自行車的安全性和使用便利性。 通過智能防盜馬蹄鎖，用戶可以…
閱讀更多...
YOLOv5和改進后模型的result.csv文件對比

YOLOv5和改進后模型的result.csv文件對比

import pandas as pd import matplotlib.pyplot as plt# 讀取CSV文件 df1 pd.read_csv(rE:\xianyu\yolo.csv) df2 pd.read_csv(rE:\xianyu\final.csv)# 獲取列名 columns df1.columns# 循環繪制每一列的對比圖 for column in columns:plt.figure(figsize(8, 5))plt.plot(df1…
閱讀更多...
技術分享 | 在 IDE 插件開發中接入 JCEF 框架

技術分享 | 在 IDE 插件開發中接入 JCEF 框架

項目背景 當前的開發環境存在多種不同語言的 IDE&#xff0c;如 JetBrains 全家桶、Eclipse、Android Studio 和 VS Code 等等。由于每個 IDE 各有其特定的語言和平臺要求&#xff0c;因此開發 IDE 插件時&#xff0c;需要投入大量資源才能盡可能覆蓋大部分工具。同時&#xf…
閱讀更多...
數據結構算法-貪心算法

數據結構算法-貪心算法

引言 貪心&#xff1a;人只要有 “需求“ &#xff0c;都會有有點“貪“&#xff0c; 這種“貪“是一種選擇&#xff0c;或者“”取舍“ RTS&#xff08;即時戰略&#xff09;游戲&#xff1a; 帝國時代里 首先確保擁有足夠的人口 足夠的糧食&#xff0c;足夠的戰略資源 足夠的…
閱讀更多...
干貨科普 | 不同類型的機器人及其在工作中的應用

干貨科普 | 不同類型的機器人及其在工作中的應用

原創 | 文 BFT機器人 制造商在其操作中使用各種類型的機器人&#xff0c;每種機器人都具有特定的能力和功能。我們將討論制造業中使用的一些最常見類型的機器人&#xff0c;以及哪種機器人可能最適合您的應用。 01 關節機器人 關節式機器人是一種工業機器人&#xff0c;具有一…
閱讀更多...
npm，yarn，pnpm 清理緩存

npm，yarn，pnpm 清理緩存

目錄 1&#xff0c;為什么要清理緩存1&#xff0c;緩存文件太多&#xff0c;影響系統運行2&#xff0c;不同源會有區別 2&#xff0c;命令2.1&#xff0c;npm2.2&#xff0c;yarn2.3&#xff0c;pnpm 1&#xff0c;為什么要清理緩存 1&#xff0c;緩存文件太多&#xff0c;影響…
閱讀更多...
關于easy-es的聚合問題

關于easy-es的聚合問題

es實體類&#xff1a; public class ChemicalES {IndexId(type IdType.CUSTOMIZE)private Long id;HighLightIndexField(fieldType FieldType.TEXT, analyzer "ik_max_word")private String name;IndexField(fieldType FieldType.KEYWORD)private List<Stri…
閱讀更多...
三數之和 Java版

三數之和 Java版

題目描述&#xff1a;給你一個包含 n 個整數的數組 nums&#xff0c;判斷 nums 中是否存在三個元素 a&#xff0c;b&#xff0c;c &#xff0c;使得 a b c 0 請你找出所有和為 0 且不重復的三元組。 注意&#xff1a;答案中不可以包含重復的三元組。 輸入&#xff1a;nums …
閱讀更多...
“土味出海”，屢試不爽！短劇出海引來新一輪爆發？

“土味出海”，屢試不爽！短劇出海引來新一輪爆發？

土味和“錢途”并存的短劇不僅在國內迅猛爆發&#xff0c;今年下半年以來海外市場多部爆火短劇出現&#xff0c;“短劇出海”的話題熱度不斷攀升&#xff0c;絲毫不差2021年網文出海的盛況。 “霸總的愛&#xff0c;日入千萬刀”&#xff0c;是真實存在的&#xff01; 據統計…
閱讀更多...
tp8 使用rabbitMQ（1）簡單隊列

tp8 使用rabbitMQ（1）簡單隊列

php8.0 使用 rabbitmq 要使用 3.6版本以上的&#xff0c; 并且還要開啟 php.ini中的 socket 擴展 php think make:command SimpleMQProduce //創建一個生產者命令行 php think make:command SimpleMQConsumer //創建一個消費者命令行 代碼中的消息持久化的說明 RabbitMQ 消息持…
閱讀更多...
#Js篇：var、let和 const

#Js篇：var、let和 const

var 聲明的變量具有函數作用域或者全局作用域&#xff1b;存在變量提升&#xff0c;即在執行上下文中&#xff0c;變量會被提升到函數或全局作用域的頂部&#xff0c;但初始化的賦值不會提升&#xff1b;可以重復聲明同一個變量不會報錯&#xff1b;可以被重新賦值&#xff1b…
閱讀更多...
vue3 + Ant Design Vue國際化，組件默認顯示中文

vue3 + Ant Design Vue國際化，組件默認顯示中文

官網 寫入App.vue <template><ConfigProvider :locale"zhCN"><router-view :key"$route.fullPath"></router-view></ConfigProvider> </template><script setup> import { ConfigProvider } from "ant-de…
閱讀更多...
某上市證券公司：管控文件交換行為 保護核心數據資產

某上市證券公司：管控文件交換行為 保護核心數據資產

客戶簡介 某上市證券公司成立于2001年&#xff0c;經營范圍包括&#xff1a;證券經紀、證券投資咨詢、證券承銷與保薦、證券自營等。經過多年發展&#xff0c;在北京、上海、深圳、重慶、杭州、廈門等國內主要中心城市及甘肅省內各地市設立了15家分公司和80余家證券營業部。20…
閱讀更多...
軟文推廣中如何提煉好產品賣點，媒介盒子分享

軟文推廣中如何提煉好產品賣點，媒介盒子分享

內容同質化的時代下&#xff0c;企業應該如何讓用戶留下印象&#xff0c;并且成功將產品賣出去&#xff0c;核心思維就在于提煉產品賣點&#xff0c;產品賣點是銷量提升的關鍵&#xff0c;相信企業在推廣產品時都會有點困惑&#xff0c;感覺自家產品和競品比起來只是logo、外觀…
閱讀更多...
壓縮與解壓縮

壓縮與解壓縮

核心接口 Compressor package com.xxx.arch.mw.nbp.common.csp;import com.xxx.arch.mw.nbp.common.constant.CommonConstants; import com.xxx.arch.mw.nbp.common.exception.NbpException;import static com.xxx.arch.mw.nbp.common.csp.CompressorEnum.ZSTD;/*** */ publi…
閱讀更多...
【mybatis】使用＜foreach＞報錯parameter ‘id‘ not found

【mybatis】使用＜foreach＞報錯parameter ‘id‘ not found

程序其他sql都執行正常&#xff0c;也寫了param注解&#xff0c;但是還是一直報parameter ‘id’ not found。最后發現是調用sql的實現類里ids的入參對象名稱不叫ids&#xff0c;叫idList 代碼如下&#xff1a; List<Map<String,String>> resultmapper.sql(date,…
閱讀更多...
【攻防世界-misc】pure_color

【攻防世界-misc】pure_color

1.方法一&#xff1a;用畫圖工具打開圖片&#xff0c;將圖片拷貝至虛擬機win7桌面&#xff0c; 點“屬性”&#xff0c;顏色設置為“黑白”&#xff0c; 出現flag值。 2.方法二&#xff1a;使用Stegsilve打開&#xff0c;分析圖片 將圖片打開&#xff0c;按左右鍵查找&#xff…
閱讀更多...
c#數據庫：vs2022 加入mysql數據源

c#數據庫：vs2022 加入mysql數據源

網上有VS2019連接MySQL數據庫的&#xff0c;那么VS2022&#xff0c;VS2023如果和連接到mysql數據庫呢&#xff0c;這里總結一下我的經歷&#xff1a; 1、首先下載ODBC驅動安裝包 當前下載地址&#xff1a;https://dev.mysql.com/downloads/connector/odbc/ 2、ODBC安裝 下載完…
閱讀更多...
openGauss學習筆記-131 openGauss 數據庫運維-啟停openGauss

openGauss學習筆記-131 openGauss 數據庫運維-啟停openGauss

文章目錄 openGauss學習筆記-131 openGauss 數據庫運維-啟停openGauss131.1 啟動openGauss131.2 停止openGauss131.3 示例131.3.1 啟動openGauss131.3.2 停止openGauss 131.4 錯誤排查 openGauss學習筆記-131 openGauss 數據庫運維-啟停openGauss 131.1 啟動openGauss 以操作系…
閱讀更多...
最新文章

Copyright @ 2022~2023