css實(shí)現(xiàn)滾動(dòng)時(shí)選中區(qū)域字體顏色加深的示例代碼
我要評(píng)論在封裝日期選擇器時(shí)，需要選中時(shí)字體顏色加深，先看一下實(shí)現(xiàn)后的效果
可以看到加深的不是整個(gè)文字，而是中間那片區(qū)域今天聊的重點(diǎn)不在選擇器的封裝，主要看這個(gè)樣式效果，想了解此組件的實(shí)現(xiàn)思路可以看之前的文章日期選擇器實(shí)現(xiàn)思路：
1.首先它是進(jìn)入所在區(qū)域顏色就會(huì)加深，不是整個(gè)字體，所以我們就不能從選中是改變文字樣式著手了，看到是區(qū)域首先想到的就是蒙層了
2. 可是蒙層實(shí)現(xiàn)中間顏色變淺容易，就加蒙層+透明+定位就好，那如何加蒙層中間顏色反而變深呢，如果糾結(jié)從選中部分解決顏色加深的效果將會(huì)陷入深思。。。
3. 我們知道顏色變淺色容易那就讓除了中間選中部分之外的都加蒙層使顏色變淺，到選中部分的自然都是深色了
4. 確定了要給上下加蒙層之后，又有問(wèn)題需要考慮，如果加了蒙層在上面，還可以觸發(fā)touchmove滾動(dòng)嗎？這里就想到了sticky定位
首先sticky不會(huì)脫離流文檔，那么觸發(fā)touchmove依舊是觸發(fā)的此盒子內(nèi)
代碼實(shí)現(xiàn)：
//html結(jié)構(gòu)
<body>
<div class="box">
<p class="top"></p>
<p class="one">123123</p>
.....此處省略很多個(gè)
<p class="one">123123</p>
<p class="bottom"></p>
</div>
</body>
//樣式
<style>
.box{
margin-top: 100px;
height: 420px;
width: 300px;
position: relative;
background-color: fff;
overflow: auto;
border: indigo 1px solid;
}
p{
margin:0;
height: 20px;
text-align: center;
}
//上下和加一個(gè)蒙層 背景白色 加上透明度 使遮擋的文字顏色變淺
.top{
height: 200px;
background-color: #fff;
position: sticky; //*******關(guān)鍵代碼
top: 0; //*******關(guān)鍵代碼
opacity: .4; //*******關(guān)鍵代碼
}
.bottom{
height: 200px;
background-color: #fff;
position: sticky;
bottom: 0;
opacity: .4;
}
</style>
實(shí)現(xiàn)效果：
到此這篇關(guān)于css實(shí)現(xiàn)滾動(dòng)時(shí)選中區(qū)域字體顏色加深的示例代碼的文章就介紹到這了,更多相關(guān)css選中區(qū)域字體顏色加深內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
純css3實(shí)現(xiàn)橫向無(wú)限滾動(dòng)的示例代碼
這篇文章主要介紹了純css3實(shí)現(xiàn)橫向無(wú)限滾動(dòng)的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)2020-11-06- 這篇文章介紹了使用CSS設(shè)置滾動(dòng)條樣式，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-12-20
能用CSS實(shí)現(xiàn)的就不要麻煩JavaScript了
雖然萬(wàn)物都可以是JavaScript，但某種程度css的運(yùn)行效率會(huì)比JavaScript高，所以筆者認(rèn)為:能用CSS實(shí)現(xiàn)的就不用麻煩JavaScript2021-09-28
這篇文章主要介紹了CSS如何完成視差滾動(dòng)效果，幫助大家更好的理解和學(xué)習(xí)使用CSS，感興趣的朋友可以了解下2021-04-27CSS實(shí)現(xiàn)移動(dòng)端橫向滾動(dòng)導(dǎo)航條(PC端也適用)
這篇文章主要介紹了CSS實(shí)現(xiàn)移動(dòng)端橫向滾動(dòng)導(dǎo)航條(PC端也適用)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編2021-03-17
微信小程序純CSS實(shí)現(xiàn)無(wú)限彈幕滾動(dòng)效果
這篇文章主要介紹了微信小程序純CSS實(shí)現(xiàn)無(wú)限彈幕滾動(dòng)效果,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-31
