Как да добавя превъртане към div. Хоризонтално превъртане с чист CSS

Здравейте приятели. Днес ще говорим за плавно превъртане на сайта. Тоест не за това, когато щракнете върху бутон или връзка, а за плавното превъртане при използване на колело или плъзгач.

Много кратка бележка, просто трябваше да я внедря в един от сайтовете и реших да пиша за това в блог, докато подготвям по-сериозна статия (джаджа за отстъпки), по молба на един от читателите. Артем, здравей на теб. не съм забравил!

Разбира се, много хора използват браузъри, които вече имат конфигурирано плавно превъртане, мнозина използват специално разширениеза браузъра, но не всички. Нека го направим по-гладко на повечето устройства, които ще посещават вашия сайт.

Плъгин за плавно превъртане на уебсайтове

За да реша този проблем, избрах приставката Malihu-custom-scrollbar-plugin, тъй като тя има много функции:

• Вертикална и/или хоризонтална ивицапревъртане.
• Персонализиран импулс за превъртане.
• Плавно превъртане с колелото на мишката.
• Плавно превъртане за плъзгача.
• Поддръжка на клавиатура и плавно превъртане със стрелки или PgUp / PgDn.
• Поддръжка за сензорни екрани.
• Готови за използване теми.
• Ръчно персонализиране с CSS.
• Различни опции за показване на плъзгача.
• Възможността за добавяне на плавно превъртане към различни елементи на страницата, които го имат.

Разбира се, за мнозина тази функционалност може да е излишна. Ако просто искате да изгладите превъртането с колелото, тогава в края ще анализираме едно много просто решение за тази цел.

„Спри, плавното превъртане в различни блокове е добре, но къде е плавното превъртане на самия сайт?“ - ти каза. Спокойствие. Сега ще се справим с това.

Plugin връзки

Тъй като избраното решение е jQuery плъгин, първата стъпка е да свържете самия jQuery към сайта, ако не сте го свързали.

Сега изтеглете приставката за плавно превъртане, като използвате връзката по-горе, и свържете 2 файла към сайта.

• jquery.mCustomScrollbar.concat.min.js
• jquery.mCustomScrollbar.min.css

Получавате следната структура:

Основното нещо, което трябва да запомните, е, че всички jQuery-зависими плъгини трябва да бъдат включени след самия jQuery.

След като всичко е свързано, трябва да инициализирате скрипта:

И добавете няколко към CSS прости правилаза да накарате превъртането да се приложи към документа. В самото начало на вашия стилов лист добавете следното маркиране:

Тяло, html (височина: 100%; преливане: скрито;)

Това ще премахне стандартна лентапревъртете браузъра и задайте височината, която скриптът може да разбере. Не се страхувайте, ако се свързвате с готов уебсайт. В 99% от случаите това няма да повлияе на маркирането ви по никакъв начин.

Той е свързан по същия начин като първия, има само 3 настройки и тежи само 2,6 килобайта:

$ (функция () (jQuery.scrollSpeed ​​(100, 800, "easeOutCubic");))

Когато първото число е стъпката на превъртане, второто число е скоростта, а третото е типът на анимацията.

Това е всичко. Сбогом на всички.

Здравейте приятели!
V последните временачитателите на блога показват повишен интерес към създаването и разширяването на функционалността. Съвсем наскоро се опитах да разкажа подробно как да вградя (текст), надявам се, че успях.

Днес един от посетителите на блога забеляза такава функция, че ако добавите към модален прозорецима твърде много текст, тогава той е разтегнат по дължина и е невъзможно да се превърти нагоре, за да се види целия текст в неговата цялост, а бутонът за затваряне е скрит от поглед, което само по себе си не е добре. Разбира се, модалният прозорец е идеално затворен чрез щракване навсякъде на страницата, но както правилно отбелязахте (от неговия коментар и танц), не всички посетители на сайта могат да се справят с това... Съответно, читателят има въпрос как да добави лента за превъртане към този модален прозорец?

Решението и целият механизъм за изпълнение се оказаха много прости, няма значение дали ще изведете текста в главния прозорец или в диалоговия прозорец. Можете дори да прикачите лента за превъртане към бутон! Нека, скъпи читатели, да разгледаме по-отблизо как можете да поставите модален прозорец обемист текстизползвайки лентата за превъртане, като по този начин запазвате размера на прозореца.

Един пример погледна, най-любопитните първи погледнаха източникдемо страница и всичко веднага стана ясно, нищо свръхестествено. Може да се използва текстова област,вградена рамкаи самата страница - тагът тялов който хипотетично може да се появи лента за превъртане, но приложих раздел- контейнер, като сте написали всички необходими свойства в стила. В CSS има прекрасно свойство, което контролира как се показва съдържанието. блоков елементако не пасва изцяло и излиза извън обхвата на посочените размери.

Това свойство има няколко стойности, в нашия случай използвах преливане: автоматично, лентата за превъртане ще се добавя само когато е необходимо, т.е. когато размерът на текста надвишава размера на блока. За да бъде изложен постоянно, имотът се нуждае препълванеприсвоете стойност превъртете

Важно е да се отбележи, че ако сте избрали модален прозорец с ширина 500px за поставяне на вашето съдържание, трябва да зададете ширината на блока с текста на малко по-малко, в рамките на 480px. Можете да зададете всяка височина, въпреки че не трябва да я задавате твърде ниска, тесният прозорец не изглежда много хубаво и читателят ще трябва постоянно да използва превъртане. В моя пример зададох височината раздел-контейнер от 300px, никой не ви притеснява да експериментирате с този параметър, в една или друга посока.

HTML / CSS

В крайна сметка, в html маркиране, получаваме неусложнен и лесен за запомняне код, който по-късно можете лесно да вмъкнете в:

Ако направите всичко правилно, тогава трябва да получите страхотен изскачащ прозорец с лента за превъртане, визуален пример винаги ще ви помогне да работите по това:

Има и други, не по-малко интересни методирешавайки този проблем, ние разгледахме може би най-простия начин, без ненужно претрупване на код и използване допълнително форматиранесвойства на лентата за превъртане ( плъзгач), за което е писано дълго време, много и подробно, просто трябва да използвате търсачка и повече от хиляда страници с информация по темата ще ви изпаднат.
Е, всичко, което трябва да кажа е: Сбогом!

PS:Често ме питат как да вляза в Google+? Всичко е много просто, следвайте връзката по-долу, въведете вашето потребителско име и парола в Google и започнете своята забързана дейност, докато бих искал да ме добавите в кръговете си, тъй като ще има много полезни и интересни неща -)))

Нямаме образование, но имаме вдъхновение, ако бях образован, тогава щях да стана глупак.

Боб Марли

С цялото си уважение, Андрю

От автора:статия от нашия гост Питър Бизманс. Петър - преден разработчикна уебсайта на аудиторията, където обича да пише стилове в SCSS. Днес той ще ни покаже това, което аз наричам честен CSS трик. Цялата мрежа е вертикална. Четете сайта като обикновена книга: от ляво на дясно, отгоре надолу. Но понякога искате да се измъкнете от вертикалността и да направите нещо лудо: направете хоризонтален списък... Или още по-луд, хоризонтален сайт!

Би било хубаво, ако можем да направим така:

/ * фалшив код * / div (посока на превъртане: хоризонтална;)

/ * фалшив код * / div ( скрол - посока: хоризонтална;

За съжаление това няма да се случи. Това дори не е в плановете за CSS.

Това е много лошо, защото във фирмата, в която работя, би било много полезно. Правим много презентации, а презентацията е доста хоризонтално нещо. Обикновено съотношението на слайдовете е 4: 3 или 16: 9. Поради това имаме постоянен проблемс хоризонтални слайдове и вертикални уеб технологии. Под "ние" имам предвид себе си. Но това, което обичам, е трудността.

Друг случай на употреба

Това ми дойде наум специфичен начинприложение. Идеята е, че за купувачите би било удобно да разглеждат всички продукти на един слайд. Естествено, продуктовият каталог няма да се побере в една форма. Затова решихме да разделим каталога на три категории, всяка с хоризонтално превъртане. Така тримата най популярни стокивидими във всяка категория и отворени за по-малко важни продукти лесен достъп.

Пътят без JavaScript

Всички знаем, че има много начини за хоризонтално превъртане в JavaScript. Има няколко примера в CSS-Tricks. Чудех се дали е възможно да се преведе тази идея чист CSS... Решението се оказа много просто:

създайте контейнер с елементи;

завъртете контейнера на 90 градуса обратно на часовниковата стрелка, така че долният ръб да е отдясно;

завъртете елементите вътре в контейнера обратно на място.

Стъпка 1) създайте контейнера

Създайте div блок с много деца.

В нашия пример контейнерът с възможност за превъртане ще бъде широк 300px и ще съдържа 8 елемента с размери 100x100px. Размерите са произволни, можете да зададете всякакви.

< div class = "квадрати с хоризонтална обвивка на превъртане"> < div >т. 1< / div > < div >т. 2< / div > < div >т.3< / div > < div >т. 4< / div > < div >т.5< / div > < div >т. 6< / div > < div >т.7< / div > < div >т. 8< / div > < / div >

Височината на контейнера ще стане ширината и обратно. Под "ширината" на контейнера ще бъде 300px:

Horizontal-scroll-wrapper (ширина: 100px; височина: 300px; overflow-y: auto; overflow-x: hidden;)

ширина: 100px; височина: 300px; преливане - y: автоматично; преливане - x: скрито;

И децата:

Horizontal-scroll-wrapper> div (ширина: 100px; височина: 100px;)

Хоризонтално - превъртане - обвивка> div ( ширина: 100px; височина: 100px;

Стъпка 2) завъртете контейнера

Сега трябва да завъртите контейнера с -90 градуса на CSS помощтрансформиращи свойства. Имаме хоризонтален скролер.

Horizontal-scroll-wrapper (... transform: rotate (-90deg); transform-origin: десен отгоре; }

Хоризонтално - превъртане - обвивка ( . . . трансформиране: завъртане (- 90 градуса);

Има само един малък проблем: децата се въртят с контейнера.

Стъпка 3) върнете децата на място

И така, как да върнете елементите на мястото си? Обърнете го обратно с CSS свойстватрансформирайте.

Horizontal-scroll-wrapper> div (... transform: rotate (90deg); transform-origin: вдясно отгоре;)

Хоризонтално - превъртане - обвивка> div ( . . . трансформиране: завъртане (90 градуса); transform - начало: десен връх;

Стъпка 4) фиксирано позициониране

Изглежда добре, но има няколко проблема.

Завъртахме контейнера и зададохме горния десен ъгъл като котва, поради това лява странаизместен с ширината на контейнера. Ако ви е трудно да си представите, просто поставете пръста си отдясно горен ъгълстраница и я завъртете. Изход: трябва да го завъртите обратно, като използвате свойството translate.

По-добре сега. Но първият елемент все още не се вижда, тъй като същият проблем се наблюдава и при децата. Това може да се коригира, като се даде на първото дете горно поле с неговата ширина или чрез трансформиране на всички елементи като контейнер. Най-лесният начин, който открих, е да добавя горна подложка към контейнера, равна на ширината на децата, като по този начин създавам буфер за елементите.

Съвместимост

Проверих съвместимостта на наличните за мен устройства.

работен плот

Тъй като стилът на лентите за превъртане досега работи само в браузърите Webkit / Blink, обикновена сива лента за превъртане се показва във Firefox и IE. Това може да се поправи с JS и да се скрие напълно, но това е тема за друг урок.

Превъртането с колелото на мишката работи чудесно на работния плот. Но моят лаптоп има собствено мнение по този въпрос. На устройства със сензорни екрани и тъчпадове, демонстрацията се държи така, сякаш div изобщо не е завъртян.

Мобилни устройства

Бях приятно изненадан да разбера, че Android разбира, че контейнерът е завъртян и ви позволява да превъртате с плъзгания надясно и наляво.

Напротив, с iOS нещата не са толкова гладки. Браузърът се държи така, сякаш контейнерът изобщо не е завъртян. Следователно, трябва да използвате плъзгане нагоре и надолу, за да превъртите, което е доста странно. Препълване: скритото не решава проблема.

Заключение

Според уебсайта „Мога ли да използвам“, трансформациите в CSS вече се поддържат от 93% + от потребителите (към момента на писане, ноември 2016 г.). Това не би трябвало да е проблем.

По-добре е обаче да не използвате този метод продуктивно. Тествах го на някои устройства, но не на всички и не толкова задълбочено.

Повечето голям проблем- сензорни входове, в които трябва да плъзнете нагоре и надолу, за да отидете наляво и надясно. Решението може да бъде да напишете съобщение на сайта с обяснение, но тогава трябва да разчитате на факта, че потребителите ще го прочетат. И дори тогава би било в противоречие със здравия разум. Друго решение е да вземете сензорни входове с помощта на JS на устройства, но тогава е по-добре да напишете всичко на JS и напълно да изоставите нашия CSS хак.

3. Принудително вертикално и хоризонтално превъртане в CSS блока
4. Пример за превъртащ се div блок

В тази статия ще анализираме въпроса за създаване на блок (div) фиксиран размерс възможност за превъртане хоризонтално и вертикално. Това може да се приложи използвайки CSS... Отговорен за това свойство преливане.

Относно преливането на полезно свойство

Имот препълванеотговаря за показването на съдържанието на блоков елемент. Може да се използва, когато съдържанието не се побира напълно и излиза извън областта на блока.

препълване-x- отговаря за хоризонтално показване на съдържанието на блоков елемент.
преливане-y- отговаря за изобразяването на съдържанието на блоков елемент вертикално.

CSS код

прокрутка (
преливане: автоматично; / * свойство за превъртане хоризонтално. Автомат, ако съдържанието е по-голямо от блока * /
}

Препълващи свойства и стойности

видими- показва цялото съдържание на елемента, дори извън определената ширина.
скрит- показва се само областта вътре в елемента, останалата част е скрита.
превъртете- принудително добавена хоризонтална (y) или хоризонтална (x) лента за превъртане.
Автоматичен- хоризонтална лента за превъртане се добавя автоматично, ако блокът е по-малък.

Помислете за пример CSS клас... По ширина и височина задаваме желаната ширина и височина на блока (съдържанието на блока няма да надхвърли тях) и със свойството overflow: auto; задайте хоризонтално превъртане, ако е необходимо

CSS код

прокрутка (
ширина: 150px; / * ширината на нашия блок * /
височина: 100px; / * височината на нашия блок * /


преливане: автоматично; / * свойство за превъртане хоризонтално. Автомат, ако има повече блок * /
}

Принудително превъртане в CSS блок

Можете също да принудително превъртате по височина и ширина. За да направите това, всяка ос: overflow-y: scroll; (вертикално) overflow-x: превъртане; (хоризонтално) указваме параметъра за превъртане, принудително превъртане.

HTML и CSS код

прокрутка (
височина: 150px; / * височината на нашия блок * /
фон: #fff; / * цвят на фона, бял * /
граница: 1px плътно # C1C1C1; / * размер и цвят на рамката на блока * /


}

Пример за превъртане на div блок

HTML и CSS код

Един от имотите препълванеможе да бъде премахнат, тогава ще има превъртане само по една ос, което е напълно достатъчно.
Вижте работата на скрипта НапримерПо-долу.

Поздрави, скъпи приятели. Както може би сте забелязали, в почти всички браузъри превъртането на уебсайтове е много рязко и не е красиво. И, разбира се, бих искал да направя превъртането за моя сайт по-гладко, разбира се, можете да направите това и освен това не се напрягайте твърде много. Това се прави с помощта на прост JQuery плъгини няколко CSS правила. И за да видите как работи всичко, ви предлагам да разгледате демонстрацията по-долу.

Ι

Сега нека преминем към прикачване на плавно превъртане към нашия сайт.

HTML

Първо, ще трябва да прикачим библиотека jQuery... Ако вече го имате прикачен, пропуснете тази стъпка:

След това трябва да прикачим самия плъгин jQuery, който отговаря за нашето плавно превъртане, а заедно с него има отделни CSS правила, които променят самата лента за превъртане на сайта. Ще говорим повече за лентата за превъртане по-подробно в следващия урок, но засега само плавно превъртане. А ето и правилата и приставката:

Всичко. Сега вече направихме първата и важна стъпка. Сега трябва да добавим едно просто правило към CSS стиловенашия сайт.

CSS

html, тяло (височина: 100%;)

Това е, за да стане ясно на нашия плъгин, че ширината на страницата е разтеглена и е 100% висока. Не забравяйте да добавите това правило към вашия CSS или превъртането няма да работи.

Скрипт

И сега предлагам да разгледаме по-отблизо демонстрационния пример. И ще започнем с HTML.

HTML в демонстрация

Съдържание

---

---

Както можете да видите, тук използвах напълно стандартно HTML5 маркиране, с всички вмъкнати скриптове и CSS файловеза които говорихме по-горе. Мисля, че тук няма какво да обяснявам, ако нещо не ви е ясно, не забравяйте да попитате в коментарите.

Засега нека да разгледаме правилата на CSS.

CSS от демонстрация

@import url (http://fonts.googleapis.com/css?family=Bad+Script&subset=latin,cyrillic); @import url (http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic); тяло (цвят на фона: #fff; цвят: # 555; размер на шрифта: 14px; семейство шрифтове: "Bad Script", курсив; поле: 0; допълване: 0; мин. ширина: 480px;) html, тяло ( височина: 100%;) h2 (размер на шрифта: 80 пиксела; подравняване на текста: център; семейство шрифтове: "Лобстер", курсив; тегло на шрифта: 700; стил на шрифта: курсив; цвят: # 444;) hr ( височина: 0; граница: няма; border-bottom: 1px плътно #eee; border-top: 1px плътно #eee; margin-bottom: 50px; ясно: и двете;) .cont (размер на шрифта: 30px; поле: 0 auto ; padding-top: 20px; ширина: 50%; max-width: 50%;) .text (padding-top: 15px; padding-bottom: 20px)

Правилата на CSS също са много прости и не са много от тях, можете също да видите, че тук са прикачени шрифтове на Google, за да изглежда демонстрацията добре визуално.