HTML скролинг или css прокрутка по вертикали. (css scrolling vertically)

2023-04-21

<!DOCTYPE html>
<html>
<head>
<style> 
div.ex1 {
  background-color: lightblue;
  height: 40px;
  width: 200px;
  overflow-y: scroll;
}

div.ex2 {
  background-color: lightblue;
  height: 40px;
  width: 200px;  
  overflow-y: hidden;
}

div.ex3 {
  background-color: lightblue;
  height: 40px;
  width: 200px;  
  overflow-y: auto;
}

div.ex4 {
  background-color: lightblue;
  height: 40px;
  width: 200px;  
  overflow-y: visible;
}
</style>
</head>
<body>

<h1>The overflow-y Property</h1>

<p>The overflow-y property specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it overflows at the top and bottom edges.</p>

<h2>overflow-y: scroll:</h2>
<div class="ex1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div>

<h2>overflow-y: hidden:</h2>
<div class="ex2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div>

<h2>overflow-y: auto:</h2>
<div class="ex3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div>

<h2>overflow-y: visible (default):</h2>
<div class="ex4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div>

</body>
</html>

overflow-y: auto:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.

	Bild	das
	das Bild, Bilder.	-er
	фотография; изображение; картинка
	Sehen Sie die Bilder an.
	Посмотрите на фотографии.

	Kurs	der
	der Kurs, Kurse.	-e
	курс (клас)
	Im Kurs.
	.

	Gespräch	das
	das Gespräch, Gespräche.	-e
	разговор
	Lesen Sie die Gespräche.
	Прочитайте разговоры.

	Frage	die
	die Frage, Fragen.	-n
	вопрос
	Ergänzen Sie Fragen.
	Добавлять вопросы.

	Wort	das
	das Wort, Wörter.	-̈er
	слово
	Raten Sie Wörter.
	Угадай слова.

	Lektion	die
	die Lektion, Lektionen.	-en
	урок
	Raten Sie Wörter aus der Lektion.
	Отгадайте слова из урока.

	Antwort	die
	die Antwort, Antworten.	-en
	ответ
	Schreiben Sie Fragen und Antworten.
	Напишите вопросы и ответы.

	Name	der
	der Name, Namen.	-n
	имя
	Mein Name ist Walter Baumann.
	Меня зовут Вальтер Бауманн.

	Deutsch	das
	das Deutsch,	!
	немецкий
	Ich spreche Deutsch.
	Я говорю по-немецки.

	Herr	der
	der Herr, Herren.	-en
	джентльмен
	Guten Tag, Herr Diaz.
	До свидания, мистер Диас.

	Kind	das
	das Kind, Kinder.	-er
	ребёнок, дети
	Tschüs, Kinder.
	Пока, дети.

	Dame	die
	die Dame, Damen.	-n
	дам
	Guten Abend, meine Damen und Herren.
	Добрый вечер, дамы и господа.

	Musik (Singular)	die
	die Musik (Singular),	(Sg.)
	музыка
	Willkommen bei „Musik international“.
	Добро пожаловать на "Music International".

	Frau	die
	die Frau, Frauen.	-en
	женщина
	Guten Morgen, Frau Fleckenstein
	Доброе утро, миссис Флекенштейн.

	Papa	der
	der Papa, Papas.	-s
	отец, папа
	Nacht, Papa.
	Спокойной ночи, папа.

	Entschuldigung	die
	die Entschuldigung, Entschuldigungen.	-en
	извинение
	Entschuldigung, wie heißen Sie?
	Простите, как вас зовут?

	Schweiz	die
	die Schweiz, Schweiz.	—
	Швейцария
	Ich komme aus der Schweiz.
	Я из Швейцарии.

	Sprache	die
	die Sprache, Sprachen.	-n
	язык
	Sprache: Deutsch, Polnisch, …
	Язык: немецкий, польский, …

	Buchstabe	der
	der Buchstabe, Buchstaben.	-n
	буква
	Buchstabe: a, k, s …
	Буквы: а, к, с …

	Alphabet (Singular)	das
	das Alphabet (Singular),	(Sg.)
	алфавит, -ы
	das Alphabet: A, B, C …
	Алфавит: A, B, C…

	Firma	die
	die Firma, Firmen.	Firmen
	компания, и
	Firma Microlab, guten Tag.
	Микролаб, добрый день.

	Adresse	die
	die Adresse, Adressen.	-n
	адрес, -а
	Adresse: Hofgasse 8, 6020 Innsbruck
	Адрес: Хофгассе 8, 6020 Инсбрук

	Visitenkarte	die
	die Visitenkarte, Visitenkarten.	-n
	визитная карточка, визитные карточкы,
	Schreiben Sie Ihre Visitenkarte.
	Напишите свою визитную карточку.

	Vorname	der
	der Vorname, Vornamen.	-n
	Имя, ена
	Vorname: Lorenzo, Lucie, Jürgen, …
	Имя: Лоренцо, Люция, Юрген, …

	Familienname	der
	der Familienname, Familiennamen.	-n
	Фамилия, и
	Familienname: Menardi, Plank, …
	Фамилия: Менарди, Планк, …

	Straße	die
	die Straße, Straßen.	-n
	название улицы
	Straße: Hofgasse, Bahnhofstraße, Aachener Straße …
	Улица: Hofgasse, Bahnhofstraße, Aachener Straße …

	Stadt	die
	die Stadt, Städte.	-̈e
	город, -а
	Stadt: Berlin, Linz, Schaan, …
	Город: Берлин, Линц, Шаан, …

	Land	das
	das Land, Länder.	-̈er
	страна, ы
	Land: Österreich, Schweiz, …
	Страна: Австрия, Швейцария, …

	E-Mail	die
	die E-Mail, E-Mails.	-s
	электронная почта, электронные почты,
	E-Mail: l-eigner@dk.de
	E-mail: l-eigner@dk.de

	Telefon	das
	das Telefon, Telefone.	-e
	телефон, -ы
	Telefon: 041 227 11 00
	Телефон: 041 227 11 00

	Formular	das
	das Formular, Formulare.	-e
	форма, ы
	Ergänzen Sie das Formular.
	Заполните форму.

	Kurs	der
	der Kurs, Kurse.	-e
	курс, -ы
	Kurs A1/1 Deutsch als Fremdsprache
	Курс A1/1 Немецкий язык как иностранный

	Fremdsprache	die
	die Fremdsprache, Fremdsprachen.	-n
	иностранный язык
	Ich spreche eine Fremdsprache: Deutsch.
	Я владею иностранным языком: немецким.

	Anmeldung	die
	die Anmeldung, Anmeldungen.	-en
	регистрация, и
	Kurs A1/1 Deutsch als Fremdsprache — Anmeldung
	Курс A1/1 Немецкий язык как иностранный — Регистрация

	Postleitzahl	die
	die Postleitzahl, Postleitzahlen.	-en
	почтовый индекс
	Die Postleitzahl ist 50676.
	Почтовый индекс — 50676.

	Türkei / Türkisch	die
	die Türkei / Türkisch,
	Турция / турецкий
	Ich komme aus die Türkei. / Ich spreche Türkisch .
	Я родом из Турции / Я говорю по-турецки.

	Schweiz / Deutsch	die
	die Schweiz / Deutsch,
	Швейцария / немецкий
	Ich komme aus die Schweiz. / Ich spreche Deutsch.
	Я родом из Швейцарии / я говорю по-немецки.

	Ukraine / Ukrainisch	der
	der Ukraine / Ukrainisch,
	Украина / украинский
	Ich komme aus der Ukraine. / Ich spreche Ukrainisch.
	Я родом из Украины / я говорю по-украински.

	Park	der
	der Park, Parks.	-s
	парк, -с
	Tim und Lara lernen im Park.
	Тим и Лара занимаются в парке.

	Pause	die
	die Pause, Pausen.	-n
	перерыв, -н
	Tim und Lara haben Pause.
	Тим и Лара отдыхают.

	Familie	die
	die Familie, Familien.	-n
	семья, -н
	Das ist meine Familie.
	Это моя семья.

	Vater	der
	der Vater, Väter.	-̈
	отец, -ы
	Das ist Laras Vater.
	Это отец Лары.

	.	die (PI.)
	Großeltern (Plural).	(PI.)
	бабушка и дедушка (ПИ.)
	Das sind Laras Großeltern.
	Это бабушка и дедушка Лары.

	Mutter	die
	die Mutter, Mütter.	-̈
	мать, матери
	Das ist Laras Mutter.
	Это мама Лары.

	.	die (PI.)
	Eltern (Plural)..	(PI.)
	родители (ПИ.)
	Das sind Tims Eltern.
	Это родители Тима.

	Bruder	der
	der Bruder, Brüder.	-̈
	брат, -ья
	Das ist Tims Bruder.
	Это брат Тима.

	.	die (PI.)
	Geschwister (Plural)..	(PI.)
	братья и сестры (ПИ.)
	Lara hat Geschwister.
	У Лары есть братья и сестры.

	Jahr	das
	das Jahr, Jahre.	-e
	год, -е
	Lara ist zwanzig Jahre alt.
	Ларе двадцать лет.

.	Enkel	der
.	der — die Enkel, Enkel.	—
.	внук, -и
.	Er ist Walters Enkel.
.	Он внук Уолтера.

.	Enkelin	die
.	der — die Enkelin, Enkelinnen.	-nen
.	внучка, и
.	Lili ist Walters Enkelin.
.	Лили — внучка Уолтера.

	Tochter	die
	die Tochter, Töchter.	-̈
	дочь, -ери
	Sofia ist Walters Tochter.
	София — дочь Уолтера.

	Sohn	der
	der Sohn, Söhne.	-̈e
	сын, -овя
	Tobias ist Walters Sohn.
	Тобиас — сын Уолтера.

	Schwester	die
	die Schwester, Schwestern.	-n
	сестра, -н
	Sofia ist Tobias Schwester.
	София — сестра Тобиаса.

	Oma	die
	die Oma, Omas.	-s
	бабушка, -с
	Luise ist Lilis Oma.
	Луиза — бабушка Лили.

	Mann	der
	der Mann, Männer.	-̈er
	муж, -я
	Walter ist Luises Mann.
	Вальтер — муж Луизы.

	Opa	der
	der Opa, Opas.	-s
	дедушка, -с
	Walter ist Lilis Opa.
	Вальтер — дедушка Лили.

.	Ehemann	der
.	der — die Ehemann, Ehemänner.	-̈er
.	муж, -я
.	Nikolai ist dein Ehemann.
.	Мария — ваша жена.

.	Ehefrau	die
.	der — die Ehefrau, Ehefrauen.	-en
.	жена, жёны
.	Maria ist deine Ehefrau.
.	Мария — ваша жена.

	Zahl	die
	die Zahl, Zahlen.	-en
	число, -ен
	Zahl: 0, 1, 2, …
	Число: 0, 1, 2, …

	Nummer	die
	die Nummer, Nummern.	-n
	число, -н
	Wie ist Ihre Telefonnummer?
	Какой у тебя номер телефона?

	Geburtsort	der
	der Geburtsort, Geburtsorte.	-e
	место рождения, -е
	Geburtsort: Madrid
	Место рождения: Мадрид

	Wohnort	der
	der Wohnort, Wohnorte.	-e
	место жительства, -е
	Wohnort: 20249 Hamburg
	Место жительства: 20249 Гамбург

	Familienstand (Singular)	der
	der Familienstand (Singular),	(Sg.)
	семейное положение
	Familienstand: geschieden
	Семейное положение: разведен

	Alter	das
	das Alter, Alter.	—
	возраст, -е
	Alter: 8 und 5
	Возраст: 8 и 5 лет

	Norden (Singular)	der
	der Norden (Singular),	(Sg.)
	север
	Hamburg ist im Norden.
	Гамбург находится на севере.

	Osten (Singular)	der
	der Osten (Singular),	(Sg.)
	восток
	Leipzig ist im Osten.
	Лейпциг — на востоке.

	Süden (Singular)	der
	der Süden (Singular),	(Sg.)
	юг
	München ist im Süden.
	Мюнхен — на юге.

	Westen (Singular)	der
	der Westen (Singular),	(Sg.)
	запад
	Köln ist im Westen.
	Кёльн — на западе.

	Hauptstadt	die
	die Hauptstadt, Hauptstadte.	-̈e
	столица, -е
	Berlin ist die Hauptstadt von Deutschland.
	Берлин — столица Германии.

.	Lehrer	der
.	der — die Lehrer, Lehrer.	—
.	учитель, я
.	Mein Vater ist Lehrer.
.	Мой отец — учитель.

.	Lehrerin	die
.	der — die Lehrerin, Lehrerinnen.	-nen
.	учительница, ы
.	Meine Mutter ist Lehrerin.
.	Моя мать — учительница.

	Deutsche, Deutsche	der — die
	der — die Deutsche, Deutsche, Deutschen.	-n
	немец, -н
	Mein Vater ist Kroate, meine Mutter ist Deutsche.
	Мой отец — хорват, мать — немка.

	Bruder	der
	der Bruder, Brüder.	-̈
	брат, -ья
	.
	.

	Mutter	die
	die Mutter, Mütter.	-̈
	мать, еря
	.
	.

	Oma	die
	die Oma, Omas.	-s
	бабушка, -и
	.
	.

	Schwester	die
	die Schwester, Schwestern.	-n
	сестра, ы
	.
	.

	Vater	der
	der Vater, Väter.	-̈
	отец, -ы
	.
	.

	Opa	der
	der Opa, Opas.	-s
	дедушка, -и
	.
	.

.	Enkel	der
.	der — die Enkel, Enkel.	—
.	внук, -и
.	.
.	.

.	Enkelin	die
.	der — die Enkelin, Enkelinnen.	-nen
.	внучка, -и
.	.
.	.

	Sohn	der
	der Sohn, Söhne.	-̈e
	сын, -овя
	.
	.

	Tochter	die
	die Tochter, Töchter.	-̈
	дочь, ери

Home News Contact About Support Blog Tools Base Custom More Logo Friends Partners People Work

Horizontal Scrollable Menu

Resize the browser window to see the effect.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.scrollmenu {
    background-color: #333;
    overflow: auto;
    white-space: nowrap;
}

div.scrollmenu a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}

div.scrollmenu a:hover {
    background-color: #777;
}
</style>
</head>
<body>

<div class="scrollmenu">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="#support">Support</a>
  <a href="#blog">Blog</a>
  <a href="#tools">Tools</a>  
  <a href="#base">Base</a>
  <a href="#custom">Custom</a>
  <a href="#more">More</a>
  <a href="#logo">Logo</a>
  <a href="#friends">Friends</a>
  <a href="#partners">Partners</a>
  <a href="#people">People</a>
  <a href="#work">Work</a>
</div>

<h2>Horizontal Scrollable Menu</h2>
<p>Resize the browser window to see the effect.</p>

</body>
</html>

test


	
	-----------------------------------------------------

<!doctype html>

<html lang="ru">
    <head>
      <meta charset="utf-8" />
      <title>test</title>

	<style>
a {
  display: inline-block;
  width: 50px;
  text-decoration: none;
}
nav, scroll-container {
  display: block;
  margin: 0 auto;
  text-align: center;
}
nav {
  width: 339px;
  padding: 5px;
  border: 1px solid black;
}
scroll-container {
  display: block;
  width: 350px;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
scroll-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 5em;
}
	</style>

    </head>
    <body>
	<pre>

	
	-----------------------------------------------------
	
	</pre>
<nav>
  <a href="#page-1">1</a>
  <a href="#page-2">2</a>
  <a href="#page-3">3</a>
</nav>
<scroll-container>
  <scroll-page id="page-1">1</scroll-page>
  <scroll-page id="page-2">2</scroll-page>
  <scroll-page id="page-3">3</scroll-page>
</scroll-container>	
    </body>
</html>

test


	
	-----------------------------------------------------

Меню

Один
Два
Три
Четыре

<!doctype html>

<html lang="ru">
    <head>
      <meta charset="utf-8" />
      <title>test</title>

	<style>
.drop {
  display: inline-block;
  width: 150px;
  height: 30px;
  position: relative;
  color: #fff;
}

.drop p {
  display: block;
  width: 100%;
  height: 30px;
  line-height: 30px;
  margin: 0;
  padding: 0 10px;
  box-sizing: border-box;
  background: gray;
}

.drop .dropdown_block {
  display: none;
  width: 100%;
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
}

.drop:hover .dropdown_block,
.dropdown_block:hover {
  display: block;
}

.drop ul {
  display: block;
  width: 100%;
  background: gray;
  padding: 0;
  margin: 10px 0 0;
  list-style: none;
  max-height: 90px;
  overflow: hidden auto;
}

.drop li {
  display: lock;
  width: 100%;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  box-sizing: border-box;
}

.drop li:hover {
  background: #555;
  cursor: pointer;
}
	</style>

    </head>
    <body>
	<pre>

	
	-----------------------------------------------------
	
	</pre>
<div class="drop">
  <p>Меню</p>
  <div class="dropdown_block">
    <ul>
      <li>Один</li>
      <li>Два</li>
      <li>Три</li>
      <li>Четыре</li>
    </ul>
  </div>
</div>
    </body>
</html>