Как его убрать?

Question

Дмитрий Ершов @Naamee

Кроткий текст

HTML
CSS

Как его убрать?

Как сделать так, чтобы вот это штука (не знаю как оно точно называется) который указан на скрине нельзя было перемешать направо или налево а просто прокручивать блок верх или вниз?

Вопрос задан более трёх лет назад
126 просмотров

6 комментариев

Подписаться 1 Простой 6 комментариев

Дмитрий Ершов @Naamee Автор вопроса

<!DOCTYPE  html>
<html>
    <head>
	    <title>block scroll</title>
		<meta charset="utf-8">
	</head>
	<body>
	    <style>
		  div{
	width: 600px;
	height: 400px;
	border:  1px solid #C0C0C0;
	background: #F1F1F1;
}
 .d:hover {
	width: 600px;
	height: 400px;
	border:  1px solid #C0C0C0;
	background: #F1F1F1;
	overflow:scroll;
}
		</style>
	<div class="d">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</div>
	</body>
</html>

Написано более трёх лет назад

Дмитрий Локшин @Ddmitrich

<!DOCTYPE  html>
<html>
    <head>
      <title>block scroll</title>
    <meta charset="utf-8">
  </head>
  <body>
      <style>
      .d{
  width: 600px;
  height: 400px;
  border:  1px solid #C0C0C0;
  background: #F1F1F1;
  overflow-y: scroll;
  word-wrap: break-word;
  word-break: break-all;
}
    </style>
  <div class="d">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</div>
  </body>
</html>

Написано более трёх лет назад

Mary Солнечная @MaryT

Прочитайте про overflow
Плюс у вас слово без пробелов, и выглядит оно должным образом - все в одну строчку

Написано более трёх лет назад
Дмитрий Ершов @Naamee Автор вопроса

Mary Солнечная, а нельзя изменить стиль этой прокрутки сделать его например меньше

Написано более трёх лет назад
Mary Солнечная @MaryT

Дмитрий Ершов, Нет. Чем длиннее слово, тем короче скролл. Чем меньше слово, тем он длиннее. Возможно это можно сделать с помощью кастомизации (в интернете куча js скриптов по скроллу) но лучше этого не делать

Написано более трёх лет назад
Дмитрий Ершов @Naamee Автор вопроса

Mary Солнечная, я просто хотел как вконтакте там просто он более узкий округленный

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 2

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

HTML

+1 ещё

Простой
Как сделать одинаковую высоту у карточек?
- 1 подписчик
- 19 часов назад
- 105 просмотров
1

ответ
HTML

+1 ещё

Простой
Как внизу блока сделать маску волной и поместить туда изображение?
- 2 подписчика
- вчера
- 142 просмотра
2

ответа
CSS

+1 ещё

Средний
Веб форма: появилось свойство blur, как исправить на битриксе УС?
- 1 подписчик
- вчера
- 53 просмотра
0

ответов
JavaScript

+3 ещё

Простой
Как отключить swiper-bundle.min.css?
- 1 подписчик
- вчера
- 57 просмотров
2

ответа
JavaScript

+2 ещё

Простой
Мулти селект Dropdown. Как можно создать многослойный мулти селект?
- 1 подписчик
- 24 дек.
- 86 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Почему window.scrollTo(0, document.body.scrollHeight); не работает?
- 1 подписчик
- 24 дек.
- 65 просмотров
0

ответов
CSS

Средний
Возможен ли отступ только второй строки CSS clamp?
- 1 подписчик
- 23 дек.
- 75 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как подключить 3D персонажа в three.js?
- 1 подписчик
- 23 дек.
- 68 просмотров
0

ответов
HTML

+1 ещё

Простой
Как сделать блок такой же формы?
- 1 подписчик
- 23 дек.
- 142 просмотра
1

ответ
HTML

+1 ещё

Простой
Как лучше сверстать элемент?
- 1 подписчик
- 23 дек.
- 131 просмотр
1

ответ
Показать ещё Загружается…

Верстальщик HTML

MST

от 450 $

Баннермейкер (html-5)/дизайнер-верстальщик/motion-дизайнер

BYTIME

от 130 000 ₽

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

Нарисовать арты

26 дек. 2024, в 23:03

500 руб./в час

Парсер Криптография. Работа с TLS-fingerprint

26 дек. 2024, в 21:50

5000 руб./за проект

Автоматизация ChatGPT и постинга

26 дек. 2024, в 21:01

10000 руб./за проект

<!DOCTYPE html> <html> <head> <title>block scroll</title> <meta charset="utf-8"> </head> <body> <style> div{ width: 600px; height: 400px; border: 1px solid #C0C0C0; background: #F1F1F1; } .d:hover { width: 600px; height: 400px; border: 1px solid #C0C0C0; background: #F1F1F1; overflow:scroll; } </style> <div class="d">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</div> </body> </html>
<!DOCTYPE html> <html> <head> <title>block scroll</title> <meta charset="utf-8"> </head> <body> <style> .d{ width: 600px; height: 400px; border: 1px solid #C0C0C0; background: #F1F1F1; overflow-y: scroll; word-wrap: break-word; word-break: break-all; } </style> <div class="d">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</div> </body> </html>
Прочитайте про overflow
Плюс у вас слово без пробелов, и выглядит оно должным образом - все в одну строчку
Mary Солнечная, а нельзя изменить стиль этой прокрутки сделать его например меньше
Дмитрий Ершов, Нет. Чем длиннее слово, тем короче скролл. Чем меньше слово, тем он длиннее. Возможно это можно сделать с помощью кастомизации (в интернете куча js скриптов по скроллу) но лучше этого не делать
Mary Солнечная, я просто хотел как вконтакте там просто он более узкий округленный

Answer 1 · 2017-11-18 22:00:17

Петя Персианов @Dr0nk

Junior Android Developer

htmlbook.ru/css/overflow-x

overflow-x: hidden;

Ответ написан более трёх лет назад

Комментировать

Answer 2 · 2017-11-18 22:49:10

Не рекомендую использовать в данном конкретном случае overflow-x: hidden. Лучшим решением будет воспользоваться свойством word-wrap: break-word - перенос длинного слова на новую строку. Таким образом, ваш контент не будет вылазить за пределы блока даже при экстремальных случаях. Использование overflow-x банально обрежет часть слова, выходящую за пределы блока, что на практике даст негативный результат.

Яркий пример с использованием слова Тетрагидропиранилциклопентилтетрагидропиридопиридиновые, обрезка которого заставит контент потерять смысл.

Как его убрать?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт