Удалить вертикальную прокрутку на мобильном телефоне без использования переполнения - PullRequest
Новая
       23

Удалить вертикальную прокрутку на мобильном телефоне без использования переполнения

0 голосов
/ 11 марта 2020

Есть ли способ убрать эту небольшую вертикальную прокрутку в мобильном представлении веб-страниц без использования переполнения?

Я знаю, что обычный способ - просто добавить: overflow-x: hidden;, но у меня также есть элемент с закрепление position: sticky;, которое больше не работает, когда к родительским элементам применяется переполнение. Так есть ли способ получить тот же эффект, но без использования переполнения? 

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="read comments in css">
<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>

1 Ответ

0 голосов
/ 11 марта 2020

Вы можете скрыть вертикальную полосу прокрутки с помощью псевдоэлемента ::-webkit-scrollbar, но она не работает в браузере firefox: 

body{
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox ? */
  -ms-overflow-style: none; /* IE, Edge */
}

body::-webkit-scrollbar {
  display: none; /* Chrome, Opera, Safari */
}

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>

Другой вариант - использовать контейнеры, ширина дочернего контейнера больше, чем у родительского контейнера, поэтому полоса прокрутки будет скрыта: 

.parent {
  position: relative;
  width: 100%;
  height: 75vh;
  overflow: hidden;
}

.child {
  width: 105%;
  height: 100%;
  overflow-y: scroll;
}

div.header-fixed {
  position: -webkit-sticky;
  /* Apple */
  position: sticky;
  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>
  <div class="parent">
    <div class="child"> <br>a<br>a<br>b<br>a<br>a<br>a<br>a<br>a<br>a<br>b<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>b<br>a<br>a
      <br>a<br>a<br>a<br>a<br>a<br>b<br>a<br>a<br>a<br>b<br>a<br>a<br>a<br>a<br>b<br>a<br>a<br>a<br>a<br>a
    </div>
  </div>
</body>
...