div exceeds partial scrolling and hides scroll bar

The effect you want to achieve is: the div has a scrolling effect, but the scroll bar cannot be seen outside.

Requirements: Blog system, due to the large number of people posting blogs, cannot all be displayed on the page, so a scrolling effect is required. However, a div is usually arranged on the interface to specifically place the blog data read from the database. It looks good with scroll bars. It is relatively ugly, so there is this demand.

Code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>测试界面</title>
		<style type="text/css">
			#div{
				width: 800px;
				height: 250px;
				overflow-x: hidden;
				overflow-y: scroll; 
				background: pink;
				text-align: left;
			}
			#div::-webkit-scrollbar{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="div">
			<p>淳延心得:一个活泼的人对你没有任何语言的时候,此时,应该好好反思了。</p>
			<p>淳延心得:不怕敌人多残忍,就怕自己不敢拼命。</p>
			<p>淳延心得:我之所以不快乐,不是因为钱,而是我还不够自私。</p>
			<p>淳延心得:一个第一次剪头发会哭的人,后来习惯把头发剪了,甚至想要剃头,鬼知道经理了什么</p>
			<p>淳延心得:你所看到别人的幸运,是别人努力了好久好久才发出来的光</p>
			<p>淳延心得:后来,才发现,其实,只有你看重一些无价的东西,别人都是在一点点的浪费掉</p>
			<p>淳延心得:后来,才发现,其实,只有你看重一些无价的东西,别人都是在一点点的浪费掉</p>
			<p>淳延心得:后来,才发现,其实,只有你看重一些无价的东西,别人都是在一点点的浪费掉</p>
			<p>淳延心得:后来,才发现,其实,只有你看重一些无价的东西,别人都是在一点点的浪费掉</p>
			<p>淳延心得:后来,才发现,其实,只有你看重一些无价的东西,别人都是在一点点的浪费掉</p>
			<p>淳延心得:后来,才发现,其实,只有你看重一些无价的东西,别人都是在一点点的浪费掉</p>
		</div>
	</body>
</html>

Effect:

Scroll down:

Guess you like

Origin blog.csdn.net/songxiaolingbaobao/article/details/94340607