Скролл вертикальный: Как сделать вертикальный скролл? — Хабр Q&A

Leave a Comment / Разное / By /

html — Как убрать вертикальный скролл который появляется при вращении картинки

У картинки для вращения такой код

img{
    width: 600px;
    height: 600px;
    animation: 1s linear 0s normal none infinite running rot ;
    -webkit-animation: 1s linear 0s normal none infinite running rot ;
}
@-webkit-keyframes rot {
    100% {
      transform: rotate(360deg)
    }
}
@keyframes rot {
    100% {
      transform: rotate(360deg)
    }
}
  • html
  • css

можно попробовать использовать overflow: hidden;

.images {
    width: 200px;
    height: 200px;
    
    overflow: hidden;
    border: 1px solid black;
    
    text-align: center;
}
img{
    width: 150px;
    _height: 600px;
    animation: 1s linear 0s normal none infinite running rot ;
    -webkit-animation: 1s linear 0s normal none infinite running rot ;
}
@-webkit-keyframes rot {
    100% {
      transform: rotate(360deg)
    }
}
@keyframes rot {
    100% {
      transform: rotate(360deg)
    }
}
<div class = 'images'>
  <img src = 'https://static.
 
 wikia.nocookie.net/protagonist/images/6/61/JHOfg4v3-5c2.jpg/revision/latest/scale-to-width-down/340?cb=20141022105959&path-prefix=ru'>
</div>

3

Как вариант для размышления. При повороте у тебя изображение становиться больше чем твои заявленные 600 пикселей, поэтому появляется скролл. Как вариант — обернуть картинку в блок, задать блоку overflow:hidden, ну и что-бы концы не обрезались у картинки, можно задать чуть больше размеры блоку-обертке и расположить картинку по центру.

img{
    width: 100px;
    height: 100px;
    animation: 1s linear 0s normal none infinite running rot ;
    -webkit-animation: 1s linear 0s normal none infinite running rot ;
}
.img-wrapper{
  overflow: hidden;
  width: 150px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
} 
@-webkit-keyframes rot {
    100% {
      transform: rotate(360deg)
    }
}
@keyframes rot {
    100% {
      transform: rotate(360deg)
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<div>
  <img src = 'https://lh6. googleusercontent.com/LIcZTDgp1JS321UIWoGjO1FtJMnfYxGm6ZQvi_kbC-0v7jkqnwVo35R7Nin6rpealtLg5PykvUTOz-PnZNrV1eLf52Rbv85aZLo-rmAGUXh8TnLbGt22h5QwSTQn2mju6Z8J8qlzlsnMFkmpFg'>
</div>
  
</body>
</html>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

overflow-y | CSS | WebReference

  • Содержание
    • Краткая информация
    • Синтаксис
    • Значения
    • Песочница
    • Пример
    • Спецификация
    • Браузеры

Свойство overflow-y управляет отображением содержания блочного элемента по вертикали, если контент целиком не помещается и выходит за область сверху или снизу от блока.

Значение по умолчаниюvisible
НаследуетсяНет
ПрименяетсяК блочным элементам
АнимируетсяНет

Синтаксис 

overflow-y: auto | hidden | scroll | visible

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

visible
Отображается всё содержимое элемента, даже за пределами установленной высоты.
hidden
Отображается только область внутри элемента, остальное будет скрыто.
scroll
Всегда добавляется вертикальная полоса прокрутки.
auto
Вертикальная полоса прокрутки добавляется только при необходимости.

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

auto hidden scroll visible

div {
  height: 50px;
  overflow-y: {{ playgroundValue }};
}

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>overflow-y</title> <style> body { overflow-y: hidden; /* Убираем вертикальную полосу прокрутки */ } .layer { width: 300px; /* Ширина блока */ height: 150px; /* Высота блока */ padding: 5px; /* Поля вокруг текста */ } </style> </head> <body> <div> <h3>Гетерогенный голубой гель</h3> <p>Кондуктометрия мягко передает электронный способ получения независимо от последствий проникновения метилкарбиола внутрь.
</p> </div> </body> </html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства overflow-y

Объектная модель

Объект.style.overflowY

Спецификация

СпецификацияСтатус
CSS Overflow Module Level 3Рабочий проект

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

51219.533.5
11103

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Форматирование

См. также

  • overflow
  • overflow-x
  • Отслеживание прокрутки

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 02.03.2020

Редакторы: Влад Мержевич

Свойство CSS overflow-y

❮ Назад Полное руководство по CSS Далее ❯


Пример

Показать различные значения свойства overflow-y:

div.ex1 {
 overflow-y: прокрутка;
}

div.ex2 {
  переполнение-y: скрыто;
}

div.ex3 {
  переполнение-y: авто;
}

div.ex4 {
  переполнение-y: видимое;
}

Попробуйте сами »

Определение и использование

Свойство overflow-y указывает, следует ли обрезать содержимое, добавить прокрутку bar или отображать переполнение содержимого блочного элемента, когда оно переполняется в верхний и нижний края.

Совет: Используйте свойство overflow-x для определения отсечения по левому и правому краям.

Показать демо ❯

Значение по умолчанию: видимый
Унаследовано: нет
Анимация: нет. Читать о анимированном
Версия: CSS3
Синтаксис JavaScript: объект .style.overflowY=»прокрутка» Попытайся

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Цифры, за которыми следует -ms-, указывают первую версию, которая работала с префикс.

Собственность
перелив-y 4,0 9,0
8,0 -мс-		 1,5 3,0 9,5

Синтаксис CSS

overflow-y: visible|hidden|scroll|auto|initial|inherit;

Значения свойств

Значение Описание Демо
видимый Содержимое не обрезается и может отображаться за пределами поля содержимого. Это по умолчанию Демонстрация ❯
скрытый Содержимое обрезано, механизм прокрутки не предусмотрен Демонстрация ❯
свиток Содержимое обрезается и предоставляется механизм прокрутки Демонстрация ❯
авто Должен обеспечиваться механизм прокрутки для переполненных полей Демонстрация ❯
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

Связанные страницы

Учебник CSS: CSS Overflow

Ссылка HTML DOM: свойство overflowY

❮ Предыдущая Полное руководство по CSS Далее ❯


НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

COLOR PICKER
КОД ИГРЫ

Играть в игру

Top Tutorials
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
How To Tutorial
SQL Tutorial
Python Tutorial
W3. CSS Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial

Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Лучшие примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

css — HTML: как создать DIV только с вертикальными полосами прокрутки для длинных абзацев?

спросил

Изменено 1 год, 3 месяца назад

Просмотрено 512 тысяч раз

Я хочу показать примечание об условиях на своем веб-сайте. Я не хочу использовать текстовое поле, а также не хочу использовать всю свою страницу. Я просто хочу отобразить свой текст в выбранной области и хочу использовать только вертикальную полосу прокрутки, чтобы спуститься вниз и прочитать весь текст.

В настоящее время я использую этот код:

 

 текст текст текст текст текст текст текст текст текст текст
 текст текст текст текст текст текст текст текст текст текст
 текст текст текст текст текст текст текст текст текст текст
 текст текст текст текст текст текст текст текст текст текст
 текст текст текст текст текст текст текст текст текст текст
 текст текст текст текст текст текст текст текст текст текст
 текст текст текст текст текст текст текст текст текст текст
 текст текст текст текст текст текст текст текст текст текст

Две проблемы:

  1. Он не фиксирует ширину и высоту и распространение, пока не появится весь текст.
  2. Во-вторых, отображается горизонтальная полоса прокрутки, а я не хочу ее показывать.
  • css
  • html
  • переполнение

1

Использовать переполнение-y . Это свойство CSS 3.

5

чтобы скрыть горизонтальные полосы прокрутки, вы можете сделать overflow-x скрытым, например:

 переполнение-x: скрыто;

1

Вам нужно указать ширину и высоту в px :

 width: 10px; высота: 10 пикселей;

Кроме того, можно использовать переполнение : авто; , чтобы горизонтальная полоса прокрутки не отображалась.

Поэтому вы можете попробовать следующее:

 

  текст текст текст текст текст текст текст текст текст текст
  текст текст текст текст текст текст текст текст текст текст
  текст текст текст текст текст текст текст текст текст текст
  текст текст текст текст текст текст текст текст текст текст
  текст текст текст текст текст текст текст текст текст текст
  текст текст текст текст текст текст текст текст текст текст
  текст текст текст текст текст текст текст текст текст текст
  текст текст текст текст текст текст текст текст текст текст

2

В любом случае установите overflow-x на hidden , и я предпочитаю устанавливать max-height , чтобы ограничить расширение высоты div. Ваш код должен выглядеть так:

 overflow-y: scroll;
переполнение-x: скрыто;
максимальная высота: 450 пикселей;

Сначала спасибо

Используйте overflow:auto у меня работает.

горизонтальная полоса прокрутки исчезает.

Чтобы показать вертикальную полосу прокрутки в вашем div, вам нужно добавить

 height: 100px;
переполнение-у: прокрутка;

или

 высота: 100 пикселей;
переполнение-у: авто;

2

 переполнение-y : прокрутка;
переполнение-х: скрыто;

высота является необязательной

Я также столкнулся с той же проблемой… попробуйте сделать это… это сработало для меня

 .scrollBbar
        {
        положение: фиксированное;
        верх: 50 пикселей;
        дно:0;
        слева:0;
        ширина: 200 пикселей;
        переполнение-х: скрыто;
        переполнение-у: авто;
       }

Это мой микс:

 overflow-y: scroll;
высота: 13см; // Начальная высота.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *