Html scroll horizontal and vertical

Содержание

CSS to show only horizontal and vertical scroll bar in div
Horizontal and vertical scroll bar
Only, Horizontal scroll bar
Only, Vertical scroll bar
Note
Take our free skill tests to evaluate your skill!
Scrollbar in HTML Table
Creating a Scrollbar in HTML Table
Examples of Scrollbar in HTML Table
Example #1
Example #2
Example #3
Example #4
Example #5
2. Customized Scrollbars
Features of Scrollbar in HTML Table
Conclusion
Recommended Articles
Стилизация Скролла
Стилизация скролла для Mozilla Firefox
Стилизация скролла для webkit браузеров
mCustomScrollbar
Инициализация
Инициализация через JavaScript

CSS to show only horizontal and vertical scroll bar in div

Sometimes we need to add scroll bar to a div or span whenever text in the div or span get overflow. scroll bar is supported in all browsers like IE 5+, FF 3.5+, and Safari, Opera etc. To show scroll bar, we need to specify overflow property of css to «visible» or «auto».

Horizontal and vertical scroll bar

.scrollbar < overflow: auto; /*for horizontal and vertical scroll bars */ >/* or you can set scrolling in x and y direction */ .scrollbarxy < overflow-x: auto; /*for horizontal scroll bar */ overflow-y: auto; /*for vertical scroll bar */ >

Only, Horizontal scroll bar

/* Show only horizontal scrollbar */ .hscrollbar < overflow-x: auto; /*for horizontal scroll bar */ overflow-y: hidden; /*for hiding vertical scroll bar */ >

Only, Vertical scroll bar

/* Show only vertical scrollbar */ .vscrollbar < overflow-x: hidden; /*for hiding horizontal scroll bar*/ overflow-y: auto; /*for vertical scroll bar*/ >

Note

To show scroll bar always set overflow to «visible». It will show scroll bar whether text get overflow or not.
To show scroll bar only, when text get overflowed, set overflow property to «auto».

Summary

In this article I try to explain, how you can scroll overflow text in div or span using css. I hope after reading this article you will be able to use this trick in your code. I would like to have feedback from my blog readers. Please post your feedback, question, or comments about this article.

Take our free skill tests to evaluate your skill!

In less than 5 minutes, with our skill test, you can identify your knowledge gaps and strengths.

Node.js Questions and Answers Book

Node JS is a powerful platform that enables developers to create high-performance network applications. If you’re looking for a job in Node JS development, it’s important to be prepared for questions that may be asked in an interview. In this blog post, we’ll provide a list of questions and answers that will help you stand out from the competition. We’ll also share some tips on how to best prepare for a Node JS interview. We’ll provide a list of NodeJS interview questions and answers for experienced developers as well as freshers. So, whether you’re just getting started with NodeJS or you’re an experienced developer, this post has something for everyone!

TypeScript Questions and Answers Book

If you’re preparing for a TypeScript position or you need to brush up your TypeScript skills, then this book is for you. In it, we will cover some of the most common TypeScript interview questions and answers. We’ll also provide tips and advice on how to prepare for your interview and land the job. You can just download the TypeScript interview questions and answers pdf. So, whether you’re a beginner or an experienced TypeScript developer, this book will help you get ready for your next interview.

Angular Questions and Answers Book

Developers, as you may know, interviews are not only a chance for the company to assess your skills, but it is also an opportunity for you to learn more about the company and the position. Therefore, before any interview, it is important that you do your homework – research the company and familiarize yourself with common angular interview questions and answers. In this book, we have shared a few angular coding questions that I came across recently. These questions are a great way to test your angular knowledge and learn some new techniques. In addition, we will provide a list of Angular 6 interview questions.

Bootstrap Questions and Answers Book

Bootstrap is a popular front-end framework for developing websites. In this book, we’ll provide a list of Bootstrap interview questions and answers. We’ll also provide tips on how to best answer these questions. Bootstrap interview questions and answers pdf is for web developers who want to prepare for an interview. These are the bootstrap interview questions for experienced professionals as well as freshers. This pdf will help you a lot. All the best!

JavaScript ES6 Interview Questions Answers Book

In order to be a successful JavaScript developer, it is important to be familiar with the language and common JavaScript interview questions and answers. This book provides detailed answers to some of the most commonly asked questions, so that you can be prepared for your next interview. In this book, we’ll be taking a look at the ES6 interview questions and answers. So whether you’re just getting started with ES6 or you’re interviewing candidates, this post will help you out. Let’s get started!

Источник

Scrollbar in HTML Table

Scrollbar in HTML Table is one of the features to scroll the data from horizontal and vertical formats. In default, a vertical scroll bar enables after entering the number of data to maximize size in the vertical mode. But in horizontal mode, after entering the data in paragraph format and not wrapped, the page contains the right arrow as the option to enable the data in the horizontal scroll bar. We have customized the scroll options with the help of mouse pointers. We can also allocate the scroll tables’ border, height, and width.

Web development, programming languages, Software testing & others

Creating a Scrollbar in HTML Table

When the text box’s content is too large to fit in, an HTML Scroll box will ensure that the box grows scroll bars. Some applications, like mobile apps, use scroll boxes, which will display their features, but big mobile screens will display it good some small mobile screens compatibility, it will not display on the screen, i.e.)application feature, which is to be used in the scroll box. Some plugins are needed to show some features in web applications that are to be used in the browser screen. Suppose we want to add a scroll bar option in HTML, use an “overflow” option, and set it as auto-enabled for adding horizontal and vertical scroll bars. If we want to add a vertical bar option in Html, add the line “overflow-y” in the files.

Using the tag, we will add the scroll options to HTML Page.

Examples of Scrollbar in HTML Table

Given are the examples for the HTML table:

Example #1

    .divScroll  SivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaraman

In the above example, we have enabled scrolling in horizontal and vertical bars; scrolls will automatically enable if the text exceeds the text box limits.

Example #2

  .divScroll  Welcome to my domain

In the above example, we used the ; we will show the text within the marquee using the scroll option. We can use animate the text in the scroll bars. Different sets of like Faster Scrolling, Faster Bounce, Text scrolling down, Text Scrolling Up, Jumping Text, Normal Speed, etc., are also used.

Example #3

In the example below, we will use the alert function of how much data will be displayed on the web page in pixel format.

    Welcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domain

Example #4

      Welcome to my domain Name Email  Sivaraman Sivaraman [email protected]

Example #5

Here we are going to see the Various Types of Scroll Boxes in HTML

Colored Scroll Boxes
Customized Scrollbars
Scroll box with images
Scroll Box with Borders

1. Colored Scroll Boxes

In the scroll box option, we have added the different types of colors in the text box space areas, as shown in the example below:

  Welcome to my domain.Welcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domain

domain

In the above example, we have specified the colors in the text, the same in the scroll panel.

2. Customized Scrollbars

We have customized the scroll bars using Webkit extensions; it will work in the browsers.

    body < margin-bottom: 200%; >.scroll < border: none; padding: 5px; font: 24px/36px sans-serif; width: 200px; height: 200px; overflow: scroll; >::-webkit-scrollbar < width: 12px; height: 12px; >::-webkit-scrollbar-track < border: 1px solid yellowgreen; border-radius: 10px; >::-webkit-scrollbar-thumb < background: yellowgreen; border-radius: 10px; >::-webkit-scrollbar-thumb:hover  Welcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domain

In the above codes, we see scroll options on the full page. It’s our customized option; we have enabled the scroll options in the full background screen. Once, we also checked the browser Compatability because sometimes the tool –Webkit in the CSS style does not accept some browsers. For example, Microsoft has the –ms- extensions and other browser vendors like –Webkit- extensions.

3. Scroll Box With Images

We have also used Scroll boxes in background images or foreground images. Let us see some basic examples of this feature.

4. Scroll Box Borders

We have also added the borders in the scroll panel areas. It will appear like highlighted portion Example below:

Welcome to My DomainWelcome to My Domain.Welcome to My Domain.Welcome to My Domain.Welcome to My Domain.Welcome to My Domain.Welcome to My Domain.Welcome to My Domain.

The above picture highlights the scroll area. Similarly, we can also add different borders like dotted, dashed, double borders, etc.

Features of Scrollbar in HTML Table

When we use the Scroll box, it may have some features like.,

Simple and lightweight
Autoplay
Multiple instances on one page
Useful options for customizing your text in a scrolling
We can also use the jquery library in scroll boxes for features like Previous/Next navigation buttons

Conclusion

In General, We have used many features in the HTML language, but the Scroll bar is one of the best features for crisping the data on the web page for displaying the contents. The above examples and points are in basics; meanwhile, we will have many advanced concepts and features in the HTML and CSS with Scroll bar options. The Latest Versions, HTML 5, and CSS 3, may add some options in the text scroll areas.

Стилизация Скролла

Сегодня будем стилизовать скролл с помощью CSS для webkit браузеров (Google Chrome / Safari / Opera / Яндекс.Браузер) и Mozilla Firefox. А так же рассмотрим изменение скролла при помощи плагина mCustomScrollbar.

Стилизация скролла для Mozilla Firefox

Чтобы изменить скролл в Firefox, используйте следующий код.

Первое значение scrollbar-color изменяет цвет ползунка, второе — цвет скроллбара.

Значения scrollbar-width изменят толщину (ширину — для вертикального скроллбара, высоту — для горизонтального):

auto — толщина скролла по умолчанию;
thin — более тонкий вариант скролла;
none — скрыть скролл.

Пример. Обратите внимание, данный пример предназначен для просмотра в Firefox .

Выберите цвет скроллбара
Выберите цвет ползунка скроллбара
Выберите толщину скролла

Какой-то контент. Текст, изображения или что-то ещё.

Стилизация скролла для webkit браузеров

Чтобы стилизовать скролл для Google Chrome, Яндекс.Браузер, Safari и Opera используйте следующие CSS свойства.

/* полоса прокрутки (скроллбар) */ ::-webkit-scrollbar < width: 24px; /* ширина для вертикального скролла */ height: 8px; /* высота для горизонтального скролла */ background-color: #143861; >/* ползунок скроллбара */ ::-webkit-scrollbar-thumb < background-color: #843465; border-radius: 9em; box-shadow: inset 1px 1px 10px #f3faf7; >::-webkit-scrollbar-thumb:hover < background-color: #253861; >/* Стрелки */ ::-webkit-scrollbar-button:vertical:start:decrement < background: linear-gradient(120deg, #02141a 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(240deg, #02141a 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(0deg, #02141a 30%, rgba(0, 0, 0, 0) 31%); background-color: #f6f8f4; >::-webkit-scrollbar-button:vertical:end:increment < background: linear-gradient(300deg, #02141a 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(60deg, #02141a 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(180deg, #02141a 30%, rgba(0, 0, 0, 0) 31%); background-color: #f6f8f4; >::-webkit-scrollbar-button:horizontal:start:decrement < background: linear-gradient(30deg, #02141a 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(150deg, #02141a 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(270deg, #02141a 30%, rgba(0, 0, 0, 0) 31%); background-color: #f6f8f4; >::-webkit-scrollbar-button:horizontal:end:increment

mCustomScrollbar

Теперь рассмотрим, как кроссбраузерно стилизовать скролл при помощи плагина mCustomScrollbar.

Сначала скачайте архив и извлеките к себе в проект файлы:

jquery.mCustomScrollbar.min.css
jquery.mCustomScrollbar.concat.min.js
mCSB_buttons.png

Затем подключите jQuery и файлы плагина.

Или же можете подключить все файлы через CDN jsdelivr:

Инициализация

Инициализация через JavaScript