• XSS.stack #1 – первый литературный журнал от юзеров форума

UI/UX как на странице ограничить область прокручиваемого текста?

Отслеживать
Привет! Пример кода

HTML: 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  background-color: #f1f1f1;
  font-family: Arial, Helvetica, sans-serif;
}

#navbar {
  background-color: #333;
  position: fixed;
  top: -50px;
  width: 100%;
  display: block;
  transition: top 0.3s;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 15px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}
</style>
</head>
<body>

<div id="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>

<div style="padding:15px 15px 2500px;font-size:30px">
  <p><b>This example demonstrates how to slide down a navbar when the user starts to scroll the page.</b></p>
  <p>Scroll down this frame to see the effect!</p>
  <p>Scroll to the top to hide the navbar.</p>
  <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<script>
// When the user scrolls down 20px from the top of the document, slide down the navbar
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-50px";
  }
}
</script>

</body>
</html>
 
Еще вариант.
Чтобы на странице ограничить область прокручиваемого текста, надо твой контент поместить в тег DIV.
И c помощью CSS задать ему высоту height и свойство overflow: auto. Если размер текста будет больше чем размер DIV, то отобразится скролл.

А вообще, можешь показать свой код, и тогда уже конкретно подскажу как это сделать в твоем случае.
 
sap4eg сказал(а):
Как на этом форуме. Чтоб панель с ссылками не двигалась при прокрутке страницы.
Можно сильно экономить время, используя гпт
HTML: 
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Страница с фиксированной шапкой</title>
<style>
  body, html {
    margin: 0;
    padding: 0;
  }
  .header {
    position: fixed; /* Фиксируем шапку */
    top: 0;
    left: 0;
    width: 100%; /* Ширина на весь экран */
    height: 50px; /* Высота шапки */
    background-color: black; /* Цвет фона шапки */
    color: white; /* Цвет текста шапки */
    z-index: 1000; /* Убедимся, что шапка всегда сверху */
  }
  .content {
    margin-top: 30px; /* Отступ, чтобы текст не перекрывался шапкой */
    padding: 20px; /* Паддинг для текста */
  }
</style>
</head>
<body>

<div class="header"></div>

<div class="content">
  <p>Здесь идет много текста для примера.<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>Этот текст создан для демонстрации того, как текст прокручивается под фиксированной шапкой. Можно вставить любой текст, который будет демонстрировать работу прокрутки страницы, в то время как шапка остается на одном и том же месте.</p>
  <!-- Добавьте столько абзацев, сколько нужно, чтобы демонстрировать прокрутку -->
</div>

</body>
</html>
 
sap4eg сказал(а):
Как на этом форуме. Чтоб панель с ссылками не двигалась при прокрутке страницы.
Задай position: fixed на том блоке, который не должен прокручиваться, если я тебя правильно понял.
 
CSS: 
 .header {
position: fixed; /* Фиксируем шапку */
top: 0;
left: 0;
width: 100%; /* Ширина на весь экран */
height: 21px; /* Высота шапки */
background-color: #eaeab4; /* Цвет фона шапки */
color: white; /* Цвет текста шапки */
z-index: 1000; /* Убедимся, что шапка всегда сверху */
opacity: 1;
}
.footer {
position: fixed;
top: 0;
left: 0;
width: 100%; /* Ширина на весь экран */
height: 21px; /* Высота шапки */
background-color: #eaeab4; /* Цвет фона шапки */
color: white; /* Цвет текста шапки */
z-index: -1; /* Убедимся, что шапка всегда сверху */
opacity: 1;
}
А внизу страницы как зафиксирвать элемент :)
 
Пожалуйста, обратите внимание, что пользователь заблокирован
sap4eg сказал(а):
А внизу страницы как зафиксирвать элемент :)
CSS: 
.footer {
  position: sticky;
  bottom: 0;
  width: 100%;
  height: 21px;
  background-color: #eaeab4;
  color: white;
  z-index: 999;
  opacity: 1;
}

Прилагай минимальный пример или пиши подробнее - какой элемент, где элемент.
 
ordinaria1 сказал(а):
CSS: 
.footer {
  position: sticky;
  bottom: 0;
  width: 100%;
  height: 21px;
  background-color: #eaeab4;
  color: white;
  z-index: 999;
  opacity: 1;
}

Прилагай минимальный пример или пиши подробнее - какой элемент, где элемент.
Пасиб. Работает.
 
admin


Напишите ответ...
  • Вставить:
Прикрепить файлы
Верх