删除手机上的垂直滚动而无需使用溢出

问题描述 投票:0回答:1

有没有一种方法可以在不使用溢出的情况下在网页的移动视图上删除该小的垂直滚动条?

我知道通常的方法是仅添加:overflow-x: hidden;,但是,我还有一个具有粘性定位的元素,当将溢出应用于父元素时,该元素将不再起作用。那有没有办法我可以得到相同的效果但不使用溢出?

html,body{
  overflow-x: hidden; /* ADDIND THIS SOLVES THE VERTICAL SCROLL ISSUE BUT BREAKS THE STICKY DIV BELOW */
}

div.header-fixed {
	position: -webkit-sticky; /* Apple */
	position: sticky;
	width: 100%;
	background-color: #202020;
	padding: 5px;
	top: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="CSCB20 Course Website">
<title>scroll</title>
</head>
<body>
<div class="header-fixed" id="fixed-header">
</div>
<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
</body>
html css responsive-design scrollbar overflow
1个回答
0
投票

您可以使用::-webkit-scrollbar伪元素隐藏垂直滚动条,但在firefox浏览器中不起作用:

.example{
  height: 100px;
  overflow: scroll;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE and Edge */
.example {
  -ms-overflow-style: none;
}
<div class="example">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id molestie dolor. Suspendisse tempus nisi in ligula finibus, et vulputate arcu malesuada. Nam convallis, lectus id dignissim tempor, sem nunc imperdiet massa, vel molestie eros lorem sed nunc. Fusce vel facilisis diam. Cras varius, mi eget imperdiet mollis, metus felis posuere elit, ut placerat justo nibh non urna. Donec bibendum ante dolor, quis semper erat consectetur bibendum. Nulla magna felis, tempor quis congue quis, ultricies ac justo.

Donec id blandit magna. Praesent molestie, erat ac commodo rutrum, augue mauris ultricies urna, eget ultrices lorem velit sed leo. Nam quis erat non massa varius tempor. Vivamus sodales rutrum condimentum. Ut ut nulla id purus elementum venenatis. Nullam rutrum rhoncus felis, eget interdum augue porta id. Duis ultrices laoreet tortor molestie scelerisque. Nullam sit amet dolor massa.

Sed feugiat nibh at rutrum finibus. Proin accumsan sit amet leo quis tincidunt. Aliquam sed malesuada risus. Maecenas elementum enim vitae neque euismod, ut interdum enim condimentum. Aliquam bibendum tortor non metus dictum, et dapibus risus vehicula. Sed vestibulum, lacus vel interdum sagittis, elit turpis sodales odio, vel ultrices ex tellus vitae erat. Sed facilisis ex vitae accumsan ultrices. Phasellus posuere semper metus sed imperdiet.

Ut varius velit ac quam lacinia sollicitudin. Praesent sed orci justo. Proin a molestie metus, at fringilla mi. Morbi eu sapien vitae urna hendrerit varius vel a elit. Nulla eget congue arcu. Praesent tincidunt, metus et porttitor mollis, lectus lectus gravida justo, non vulputate erat est sit amet lorem. Duis ac velit elementum justo imperdiet iaculis vitae sed erat. Praesent ultrices quam odio, ut rhoncus lacus malesuada in. Nunc sit amet commodo urna.

Donec sollicitudin dictum mollis. Integer odio arcu, imperdiet accumsan elit ut, varius scelerisque risus. In hac habitasse platea dictumst. Ut semper, dolor nec venenatis pellentesque, purus dui efficitur est, vitae fringilla sapien sem nec velit. Vestibulum ullamcorper tellus hendrerit hendrerit scelerisque. Morbi risus purus, cursus id magna ut, egestas viverra lacus. Donec tincidunt metus vehicula diam pellentesque, sed blandit turpis faucibus. Donec sed metus quis sapien vestibulum suscipit id quis dolor. Sed ut tincidunt nibh, non gravida tortor. Vivamus eu est pellentesque, mattis quam sed, fermentum justo. Duis vehicula quam massa, et laoreet magna porttitor vitae. Quisque maximus sodales turpis, et porttitor quam rhoncus ut.</div>
© www.soinside.com 2019 - 2024. All rights reserved.