Как сделать так, чтобы div следовал / фиксировался с горизонтальной прокруткой, но не вертикальной?

ProgramBox

Как сделать так, чтобы div следовал / фиксировался с горизонтальной прокруткой, но не вертикальной?

Post author:admin
Запись опубликована:11 апреля, 2023
Post category:Вопросы по программированию

#javascript #html #css

#javascript #HTML #css

Вопрос:

Как мне сделать так, чтобы div оставался фиксированным только с горизонтальной прокруткой, но не по вертикали?

Как вы можете видеть, когда я прокручиваю слева направо, верхняя панель навигации фиксируется, как и должно быть.

Хотя, когда я прокручиваю вниз, верхняя панель навигации также следует, а не так, как предполагалось. Он должен оставаться вверху, когда пользователь прокручивает вниз.

Это мой CSS для достижения этого, просто используя position: fixed; и width: 100%;

 /* Nav */
.nav {

  height: 60px;
  position: fixed;
  top: 0;

  width: 100%;
}

Я не знаю, нужно ли мне использовать JavaScript для достижения этого.

Спасибо

Дальнейший код по запросу,

   <!-- Nav -->
  <div class="nav">

    <!-- Logo -->
    <img class="logo" src="images/logo.png" alt="">

    <!-- Logout button -->
    <button class="logout-btn" id="logout_user">Logout</button>

    <!-- User's email -->
    <span id="users_email"></span>

  </div>

 /* Logo */
.logo {
  max-width: 100%;
  max-height: 100%;

  margin-left: 50px;
}

 /* Logout Button */
.logout-btn {
  float: right;
  position: relative;
  top: 40%;

  margin-right: 30px;

  border: none;
  color: white;

  padding: 5px 7px 5px 7px;
  text-align: center;
  text-decoration: none;

  font-size: 100%;
  border-radius: 10px;

  background-color: lightcoral;
}

 /* User's email */
#users_email {
  float: right;
  position: relative;
  top: 45%;

  margin-right: 15px;

  font-size: 100%;
}

Решения Дональда Дака (оба) приводят к следующему. Хотя панель навигации не следует при вертикальной прокрутке, она не растягивается по экрану и имеет полосу прокрутки внутри нее.

1. Можете ли вы поделиться большей частью вашего кода и немного больше о вашей проблеме?

2. Я хотел бы вам помочь, но можете ли вы предоставить свой дополнительный код

3. Я не знаю, как предоставление каких-либо дополнительных данных имело бы какое-либо значение. Это просто изображение (логотип), диапазон и кнопка внутри div (.nav), но, конечно, я догадываюсь.

Ответ №1:

  body{
margin:0px;
padding:5%;
background:#000;
}
.wrapper{
margin:0px auto;
width:60%;
background:#ccc;
border:2px solid #fff;
}
.block{
width:100%;
height:30px;
overflow-x: auto;
  overflow-y: none;
}
.box{
font-size:15px;
fon-weight:normal;
color:#333;
padding:0px 10px;
width:12%;
float:left;
line-height:25px;

}

 <div class="wrapper">
<div class="block">
<div class="box">Testing</div>
<div class="box">Testing</div>
<div class="box">Testing</div>
<div class="box">Testing</div>
<div class="box">Testing</div>
<div class="box">Testing</div>
<div class="box">Testing</div>
<div class="box">Testing</div><div class="box">Testing</div>
<div class="box">Testing</div>
<div class="box">Testing</div>
<div class="box">Testing</div>
<div class="box">Testing</div>
<div class="box">Testing</div>
</div>
</div>

Ответ №2:

Вам не нужно использовать javascript для этого. Вам понадобится только css.

Что вы можете использовать, так это:

 .nav {
    height: 60px;
    padding: 4px;
    margin: 4px 4px;
    overflow: auto;
    white-space: nowrap;
    width: 100%;
}

Этот CSS-код должен работать.

Если это не так, удалите overflow и попробуйте это вместо:

 .nav{
    height: 60px;
    padding: 4px;
    margin: 4px 4px;
    overflow-x: auto;
    overflow-y: none;
    white-space: nowrap;
    width: 100%;
}

Этого должно быть достаточно.

Ответ №3:

  body{
margin:0px;
padding:10%;
background:#000;
}
.wrapper{
margin:0px auto;
width:50%;
background:#ccc;
border:2px solid #fff;
}
.box{
width:100%;
height:250px;
overflow-x: auto;
  overflow-y: none;
}
.box p{
font-size:15px;
fon-weight:normal;
color:#333;
padding:2%;
line-height:25px;
}

 <div class="wrapper">
<div class="box">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>