Този
<div id="" style="overflow:scroll; height:400px;">
дава div
, който потребителят може да превърта както по хоризонтала, така и по вертикала. Как да го променя така, че div-ът да може да се превърта само вертикално?
Покрили сте всичко, освен че сте използвали грешното свойство. Лентата за превъртане може да бъде задействана с всяко свойство overflow
, overflow-x
или overflow-y
и всяко от тях може да бъде настроено на някое от visible
, hidden
, scroll
, auto
или inherit
. В момента разглеждате тези две:
auto
- Тази стойност ще гледа ширината и височината на полето. Ако те са определени, тя няма да позволи на кутията да се разшири извън тези граници. Вместо това (ако съдържанието надхвърля тези граници), ще създаде лента за превъртане за всяка от границите (или и за двете), която надхвърля дължината ѝ.
scroll
- Тази стойност налага лента за превъртане, независимо от всичко, дори ако съдържанието не надхвърля зададените граници. Ако съдържанието не трябва да се превърта, лентата ще се появи като "disabled" или неинтерактивна.
*Ако искате вертикалната лента за превъртане да се появява винаги:**
Трябва да използвате overflow-y: scroll
. Това принуждава лентата за превъртане да се появява за вертикалната ос, независимо дали е необходима или не. Ако всъщност не можете да превъртите контекста, той ще се появи като "изключена" лента за превъртане.
Ако искате лентата за превъртане да се появява само ако можете да превъртате полето:
Просто използвайте overflow: auto
. Тъй като съдържанието ви по подразбиране просто се прекъсва на следващия ред, когато не може да се побере на текущия ред, хоризонтална лента за превъртане няма да бъде създадена (освен ако не е върху елемент, който е с деактивирано обвиване на думите). За вертикалната лента тя ще позволи на съдържанието да се разшири до височината, която сте посочили. Ако надвиши тази височина, ще се покаже вертикална лента за превъртане, за да се види останалата част от съдържанието, но няма да се покаже лента за превъртане, ако не надвиши височината.
Опитайте по следния начин.
<div style="overflow-y: scroll; height:400px;">
Използвайте overflow-y: auto;
за div.
Освен това трябва да зададете и ширината.