您现在的位置是：网站首页> 编程资料编程资料

css实现滚动时选中区域字体颜色加深的示例代码html+css+js实现导航栏滚动渐变效果css3 实现滚动条美化效果的实例代码使用纯 CSS 实现滚动阴影效果纯css3实现横向无限滚动的示例代码CSS3制作圆形滚动进度条动画的示例Css3实现无缝滚动防抖CSS实现隐藏滚动条并可以滚动内容效果(三种方式)通过css动画实现一个表格滚动轮播效果css3动画小球滚动 js控制动画暂停 css滚动条样式修改的代码

2021-09-02 1334人已围观

简介这篇文章主要介绍了css实现滚动时选中区域字体颜色加深的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

在封装日期选择器时，需要选中时字体颜色加深，先看一下实现后的效果

在这里插入图片描述

可以看到加深的不是整个文字，而是中间那片区域今天聊的重点不在选择器的封装，主要看这个样式效果，想了解此组件的实现思路可以看之前的文章日期选择器实现思路：

1.首先它是进入所在区域颜色就会加深，不是整个字体，所以我们就不能从选中是改变文字样式着手了，看到是区域首先想到的就是蒙层了

2. 可是蒙层实现中间颜色变浅容易，就加蒙层+透明+定位就好，那如何加蒙层中间颜色反而变深呢，如果纠结从选中部分解决颜色加深的效果将会陷入深思。。。

3. 我们知道颜色变浅色容易那就让除了中间选中部分之外的都加蒙层使颜色变浅，到选中部分的自然都是深色了

4. 确定了要给上下加蒙层之后，又有问题需要考虑，如果加了蒙层在上面，还可以触发touchmove滚动吗？这里就想到了sticky定位
首先sticky不会脱离流文档，那么触发touchmove依旧是触发的此盒子内

代码实现：

 //html结构 
123123
 .....此处省略很多个 123123
 //样式

实现效果：

在这里插入图片描述

到此这篇关于css实现滚动时选中区域字体颜色加深的示例代码的文章就介绍到这了,更多相关css选中区域字体颜色加深内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！