提示滚动进度的指示器例如阅读进度

2019-09-05173次阅读css3
  • 给滚动的盒子添加一个从左下到到右上角的线性渐变;
  • 同时给滚动的盒子添加一个伪元素,把多出来的部分遮住。
  • 伪元素使用calc进行运算,减去了100vh,也就是减去一个屏幕的高度,这样渐变刚好在滑动到底部的时候与右上角贴合。而+5px则是滚动进度条的高度,预留出5px的高度。


html代码:

<div class="bruce flex-ct-x">
	<div class="scroll-indicator">
		<div class="article">
			<article>
				<h1>2019中国互联网企业100强榜单</h1>
				<p>8月14日,中国互联网协会、工业和信息化部网络安全产业发展中心(工业和信息化部信息中心)在2019年中国互联网企业100强发布会暨百强企业高峰论坛上联合发布了2019年中国互联网企业100强榜单、互联网成长型企业20强榜单和《2019年中国互联网企业100强发展报告》。阿里巴巴(中国)有限公司、深圳市腾讯计算机系统有限责任公司、百度公司、京东集团、浙江蚂蚁小微金融服务集团股份有限公司、网易集团、美团点评、北京字节跳动科技有限公司、三六零安全科技股份有限公司、新浪公司位列榜单前十名。</p>
				<p>今年互联网百强企业聚焦创新引领、产业融合、工业互联网等方面,主要呈现出六大特点:</p>
				<p>一是整体规模跨越式提升,成为数字经济新引擎。2019年互联网百强企业互联网业务收入高达2.75万亿元,比2018年互联网百强企业互联网业务收入增长超过1万亿元,占我国数字经济的比重达8.8%,对数字经济的贡献率达14%,带动数字经济增长近2个百分点成为带动我国互联网产业发展的重要支撑。从互联网业务收入增长率分布看,有86家企业互联网业务收入实现增长。</p>
				<p>二是研发投入强度突破10%,打造中国核心技术。2019年互联网百强企业的研发投入达到1538.7亿元,同比增长45.1%,平均研发强度突破10%,比我国R&D经费投入强度高出近8个百分点。从研发强度分布看,有40家企业研发强度在10%以上,4家企业研发强度在30%-35%之间。互联网百强企业不断突破核心技术,互联网百强企业不断提升原始创新能力,加快推进5G、人工智能、云计算、大数据等关键核心技术突破,部分技术处于国际领先水平。2019年互联网百强企业已经拥有专利近8万项,其中发明专利数近6万项。2019年互联网百强企业中应用大数据企业29家,云计算28家,人工智能相关企业24家,运用物联网技术相关的企业3家。</p>
				<p>三是应用场景多元化,智能+打造生活消费新模式。互联网百强企业深化消费互联网发展,已对衣、食、住、行等各方面进行了全场景覆盖,业务涵盖互联网公共服务、网络媒体、音乐与视频、社交网络、科技创新与知识产权等17个领域,全方位提升了人民群众的生活、工作、文化、娱乐、教育等方面的生活质量。2019年互联网百强企业中从事电子商务的共18家;涉及互联网公共服务的共41家,主要提供信息查询、教育医疗、政务办理、公共出行等便民服务,让普通人民享受到“互联网+”带来的便利生活;21家企业涉及音乐与视频业务。同时,互联网百强企业积极发展智能产业,不断拓展“智能+”,创造了智慧门店、VR/AR试衣试妆、无感支付等丰富的新消费业态和场景,打造未来智能生活消费新模式。</p>
				<p>四是工业互联网入实践深耕,赋能传统产业高质量发展。互联网百强企业通过不断向各行各业“渗透”和“赋能”,推动云计算、大数据、物联网等信息通信技术与实体经济深入融合,培育新产业、新业态、新模式,支撑实体经济高质量发展。2019年互联网百强企业产业互联网数量再创新高,以服务实体经济客户为主的产业互联网领域企业数量达到60家,累计服务近4000万家企业。其中,涉及互联网数据服务41家,生产制造服务13家,科技创新和知识产权24家,B2B电商11家,互联网基础服务10家。</p>
				<p>五是“独角兽” 企业快速增长,国际行业地位再创新高。2019年互联网百强企业及下属企业涌现出蚂蚁金服、字节跳动、京东数科、满帮集团、优刻得、找钢网等25家独角兽企业,同比增长38.9%,业务涉及金融科技、智慧物流、电子商务、新文娱等领域。从全球公司市值排名情况看,2018年,全球互联网公司市值前三十强中互联网百强企业占10家,其中,腾讯集团和阿里巴巴稳居全球互联网公司市值前十强。</p>
				<p>六是覆盖地域实现新扩展,网络扶贫取得新成效。2019年拥有互联网百强企业的省份达到18个,在2018年基础上新增江西和山东两个省份,地域覆盖不断增加。在区域分布上,东部地区互联网百强企业数量共86家,中西部地区互联网百强企业共12家,东北地区互联网百强企业数量保持2家。其中,安徽、贵州、河南、湖北、湖南、江西、重庆、四川8个中西部地区互联网百强企业数量不断增加,较去年增长1家。互联网百强企业积极践行企业社会责任,发挥互联网在助推脱贫攻坚中的作用,探索“直播+电商”等扶贫新模式,推进精准扶贫、精准脱贫。据统计,超过一半以上互联网百强企业参与网络扶贫。</p>
			</article>
		</div>
	</div>
</div>

css代码:

.scroll-indicator {
	position: relative;
	overflow: hidden;
	border: 1px solid $purple;
	width: 500px;
	height: 300px;
	&::after {
		position: absolute;
		left: 0;
		right: 5px;
		top: 2px;
		bottom: 0;
		background-color: #fff;
		content: "";
	}
}
.article {
	overflow: auto;
	height: 100%;
	&::-webkit-scrollbar {
		width: 5px;
	}
	&::-webkit-scrollbar-track {
		background-color: #f0f0f0;
	}
	&::-webkit-scrollbar-thumb {
		border-radius: 2px;
		background-color: $purple;
	}
	article {
		padding: 0 20px;
		background: linear-gradient(to right top, $red 50%, #f0f0f0 50%) no-repeat;
        //background-size: 100% calc(100% - 298px + 5px);
		background-size: 100% calc(100% - 100vh + 5px);
		> * {
			position: relative;
			z-index: 9;
		}
	}
	h1 {
		line-height: 40px;
		text-align: center;
		font-weight: bold;
		font-size: 20px;
	}
	p {
		margin-top: 20px;
		line-height: 20px;
		text-indent: 2em;
	}
}

关于实现细节解读可参考这里https://www.cnblogs.com/coco1s/p/10244168.html

上一篇: 使用animation-delay保留动画起始帧  下一篇: css3显示器故障形式的文本  

提示滚动进度的指示器例如阅读进度相关文章