Полоса прокрутки

Alter_Ego · July 8, 2011

Здравствуйте. Подскажите, пожалуйста, как убрать полосу прокрутки, чтобы ее вообще не было видно? Попробовал с помощью урока -- не получилось. Вот в Опере есть галочка "Показывать полосы прокрутки", ее можно убрать, и полоса не будет отображаться (скриншот) -- как реализовать это на своем сайте с помощью CSS и/или HTML?

Заранее благодарен!

—-

Задача решена! Всем спасибо!

Edited July 9, 2011 by Alter_Ego

Great Rash · July 8, 2011

overflow: hidden?

Вообще, не очень понятно, что вам надо.

klierik · July 8, 2011

body {overwlow: hidden;}

Alter_Ego · July 8, 2011

overflow: hidden?
Вообще, не очень понятно, что вам надо.

Чтобы правой полосы прокрутки совсем не было, но страница прокручивалась (с помощью мыши).

body {overwlow: hidden;}

Увы, но не помогает совсем.

Edited July 8, 2011 by Alter_Ego

Int · July 8, 2011

Странно, мне помогало.

Softlink · July 8, 2011

Great Rash, klierik, Int, да вы не поняли по-моему.

Надо убрать полосу визуально, но при этом сайт может хоть куда лезть, хоть в ширину хоть в длину.

mishka · July 8, 2011

Эмулировать.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		body, html { height: 100%; }
		body { overflow: hidden; }
		#wrapper {
			width: ширина окна + ширина скроллбара вертикального;
			height: высота окна + высота скроллбара горизонтального;
			overflow: scroll;
		}
	</style>
</head>
<body>
	<div id="wrapper">
		<p>Lorem ipsum dolor sit amet consectetuer senectus leo scelerisque cursus.</p>
		<p>Fames justo consectetuer ut Aenean feugiat turpis pretium nec id.</p>
		<p>Tellus pharetra parturient ipsum Nullam pede lacus orci sed condimentum auctor. Sit mus.</p>
		<p>Ac urna enim Sed condimentum wisi rhoncus quam cursus pellentesque sociis. Ante sit Donec eros neque et Proin.</p>
		<p>Urna Vivamus Vestibulum ligula interdum nascetur orci enim accumsan turpis tincidunt. Mollis justo Fusce.</p>
		<p>Lorem ipsum dolor sit amet consectetuer senectus leo scelerisque cursus.</p>
		<p>Fames justo consectetuer ut Aenean feugiat turpis pretium nec id.</p>
		<p>Tellus pharetra parturient ipsum Nullam pede lacus orci sed condimentum auctor. Sit mus.</p>
		<p>Ac urna enim Sed condimentum wisi rhoncus quam cursus pellentesque sociis. Ante sit Donec eros neque et Proin.</p>
		<p>Urna Vivamus Vestibulum ligula interdum nascetur orci enim accumsan turpis tincidunt. Mollis justo Fusce.</p>
		<p>Lorem ipsum dolor sit amet consectetuer senectus leo scelerisque cursus.</p>
		<p>Fames justo consectetuer ut Aenean feugiat turpis pretium nec id.</p>
		<p>Tellus pharetra parturient ipsum Nullam pede lacus orci sed condimentum auctor. Sit mus.</p>
		<p>Ac urna enim Sed condimentum wisi rhoncus quam cursus pellentesque sociis. Ante sit Donec eros neque et Proin.</p>
		<p>Urna Vivamus Vestibulum ligula interdum nascetur orci enim accumsan turpis tincidunt. Mollis justo Fusce.</p>
		<p>Lorem ipsum dolor sit amet consectetuer senectus leo scelerisque cursus.</p>
		<p>Fames justo consectetuer ut Aenean feugiat turpis pretium nec id.</p>
		<p>Tellus pharetra parturient ipsum Nullam pede lacus orci sed condimentum auctor. Sit mus.</p>
		<p>Ac urna enim Sed condimentum wisi rhoncus quam cursus pellentesque sociis. Ante sit Donec eros neque et Proin.</p>
		<p>Urna Vivamus Vestibulum ligula interdum nascetur orci enim accumsan turpis tincidunt. Mollis justo Fusce.</p>
	</div>
</body>
</html>

Int · July 8, 2011

Great Rash, klierik, Int, да вы не поняли по-моему.
Надо убрать полосу визуально, но при этом сайт может хоть куда лезть, хоть в ширину хоть в длину.

Да, у меня на одном сайте не было скролбара, но при этом его можно было листать мышью или pgup-pgdown

Alter_Ego · July 9, 2011

Эмулировать.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		body, html { height: 100%; }
		body { overflow: hidden; }
		#wrapper {
			width: ширина окна + ширина скроллбара вертикального;
			height: высота окна + высота скроллбара горизонтального;
			overflow: scroll;
		}
	</style>
</head>
<body>
	<div id="wrapper">
		<p>Lorem ipsum dolor sit amet consectetuer senectus leo scelerisque cursus.</p>
		<p>Fames justo consectetuer ut Aenean feugiat turpis pretium nec id.</p>
		<p>Tellus pharetra parturient ipsum Nullam pede lacus orci sed condimentum auctor. Sit mus.</p>
		<p>Ac urna enim Sed condimentum wisi rhoncus quam cursus pellentesque sociis. Ante sit Donec eros neque et Proin.</p>
		<p>Urna Vivamus Vestibulum ligula interdum nascetur orci enim accumsan turpis tincidunt. Mollis justo Fusce.</p>
		<p>Lorem ipsum dolor sit amet consectetuer senectus leo scelerisque cursus.</p>
		<p>Fames justo consectetuer ut Aenean feugiat turpis pretium nec id.</p>
		<p>Tellus pharetra parturient ipsum Nullam pede lacus orci sed condimentum auctor. Sit mus.</p>
		<p>Ac urna enim Sed condimentum wisi rhoncus quam cursus pellentesque sociis. Ante sit Donec eros neque et Proin.</p>
		<p>Urna Vivamus Vestibulum ligula interdum nascetur orci enim accumsan turpis tincidunt. Mollis justo Fusce.</p>
		<p>Lorem ipsum dolor sit amet consectetuer senectus leo scelerisque cursus.</p>
		<p>Fames justo consectetuer ut Aenean feugiat turpis pretium nec id.</p>
		<p>Tellus pharetra parturient ipsum Nullam pede lacus orci sed condimentum auctor. Sit mus.</p>
		<p>Ac urna enim Sed condimentum wisi rhoncus quam cursus pellentesque sociis. Ante sit Donec eros neque et Proin.</p>
		<p>Urna Vivamus Vestibulum ligula interdum nascetur orci enim accumsan turpis tincidunt. Mollis justo Fusce.</p>
		<p>Lorem ipsum dolor sit amet consectetuer senectus leo scelerisque cursus.</p>
		<p>Fames justo consectetuer ut Aenean feugiat turpis pretium nec id.</p>
		<p>Tellus pharetra parturient ipsum Nullam pede lacus orci sed condimentum auctor. Sit mus.</p>
		<p>Ac urna enim Sed condimentum wisi rhoncus quam cursus pellentesque sociis. Ante sit Donec eros neque et Proin.</p>
		<p>Urna Vivamus Vestibulum ligula interdum nascetur orci enim accumsan turpis tincidunt. Mollis justo Fusce.</p>
	</div>
</body>
</html>

Спасибо вам большое! Как раз то, что я хотел! Благодарю!

Alter_Ego · July 9, 2011

Эмулировать.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		body, html { height: 100%; }
		body { overflow: hidden; }
		#wrapper {
			width: ширина окна + ширина скроллбара вертикального;
			height: высота окна + высота скроллбара горизонтального;
			overflow: scroll;
		}
	</style>
</head>
<body>
	<div id="wrapper">
		<p>Lorem ipsum dolor sit amet consectetuer senectus leo scelerisque cursus.</p>
		<p>Fames justo consectetuer ut Aenean feugiat turpis pretium nec id.</p>
		<p>Tellus pharetra parturient ipsum Nullam pede lacus orci sed condimentum auctor. Sit mus.</p>
		<p>Ac urna enim Sed condimentum wisi rhoncus quam cursus pellentesque sociis. Ante sit Donec eros neque et Proin.</p>
		<p>Urna Vivamus Vestibulum ligula interdum nascetur orci enim accumsan turpis tincidunt. Mollis justo Fusce.</p>
		<p>Lorem ipsum dolor sit amet consectetuer senectus leo scelerisque cursus.</p>
		<p>Fames justo consectetuer ut Aenean feugiat turpis pretium nec id.</p>
		<p>Tellus pharetra parturient ipsum Nullam pede lacus orci sed condimentum auctor. Sit mus.</p>
		<p>Ac urna enim Sed condimentum wisi rhoncus quam cursus pellentesque sociis. Ante sit Donec eros neque et Proin.</p>
		<p>Urna Vivamus Vestibulum ligula interdum nascetur orci enim accumsan turpis tincidunt. Mollis justo Fusce.</p>
		<p>Lorem ipsum dolor sit amet consectetuer senectus leo scelerisque cursus.</p>
		<p>Fames justo consectetuer ut Aenean feugiat turpis pretium nec id.</p>
		<p>Tellus pharetra parturient ipsum Nullam pede lacus orci sed condimentum auctor. Sit mus.</p>
		<p>Ac urna enim Sed condimentum wisi rhoncus quam cursus pellentesque sociis. Ante sit Donec eros neque et Proin.</p>
		<p>Urna Vivamus Vestibulum ligula interdum nascetur orci enim accumsan turpis tincidunt. Mollis justo Fusce.</p>
		<p>Lorem ipsum dolor sit amet consectetuer senectus leo scelerisque cursus.</p>
		<p>Fames justo consectetuer ut Aenean feugiat turpis pretium nec id.</p>
		<p>Tellus pharetra parturient ipsum Nullam pede lacus orci sed condimentum auctor. Sit mus.</p>
		<p>Ac urna enim Sed condimentum wisi rhoncus quam cursus pellentesque sociis. Ante sit Donec eros neque et Proin.</p>
		<p>Urna Vivamus Vestibulum ligula interdum nascetur orci enim accumsan turpis tincidunt. Mollis justo Fusce.</p>
	</div>
</body>
</html>

К сожалению, у меня возникла небольшая проблема: страница до конца не проскролливается (не прокручивается). Я сделал высоту и ширину 100%, чтобы удобно было, но все равно никак не получилось

Вот код страницы:

<!DOCTYPE html>
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title>

        <style>
                body, html { height: 100%; }
                body { overflow: hidden; }
                #wrapper {
                        width: 100%;
                        height:100%;
                        overflow: scroll;
                }
        </style>

</head> 

<body>
<div class="container"> 
    <div id="header">  
        <ul class="top">
 [код шапки сайта]
        </ul> 
    </div> 
</div>
<div id="wrapper">
большой текст
</div>
</body> 
</html>

Edited July 9, 2011 by Alter_Ego

psywalker · July 9, 2011

А если так сделать?

                #wrapper {
                        width: 100%;
                        height:100%;
			padding-right: 30px;
                        overflow: scroll;
                }

Alter_Ego · July 9, 2011

А если так сделать?

                #wrapper {
                        width: 100%;
                        height:100%;
			padding-right: 30px;
                        overflow: scroll;
                }

Вот этот вариант более подходящий, потому что полоса прокрутки визуально исчезла, но, к сожалению, страница проскролливается не до конца.

psywalker · July 9, 2011

А если так сделать?
                #wrapper {
                        width: 100%;
                        height:100%;
			padding-right: 30px;
                        overflow: scroll;
                }
Вот этот вариант более подходящий, потому что полоса прокрутки визуально исчезла, но, к сожалению, страница проскролливается не до конца.

Не переживай, мы с тобой

<!DOCTYPE html>
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title>

        <style>
                body, html { height: 100%; }
                body { overflow: hidden;}
                #wrapper {
                        width: 100%;
                        height:100%;
						padding-right: 30px;

                        overflow: scroll;
                }
				#wrapper div {padding-bottom: 30px; }
        </style>

</head> 

<body>
<div class="container"> 
    <div id="header">  
        <ul class="top">
 [код шапки сайта]
        </ul> 
    </div> 
</div>
<div id="wrapper"><div class="c">
                <p>Lorem ipsum dolor sit amet consectetuer senectus leo scelerisque cursus.</p>
                <p>Fames justo consectetuer ut Aenean feugiat turpis pretium nec id.</p>
                <p>Tellus pharetra parturient ipsum Nullam pede lacus orci sed condimentum auctor. Sit mus.</p>
                <p>Ac urna enim Sed condimentum wisi rhoncus quam cursus pellentesque sociis. Ante sit Donec eros neque et Proin.</p>
                <p>Urna Vivamus Vestibulum ligula interdum nascetur orci enim accumsan turpis tincidunt. Mollis justo Fusce.</p>
                <p>Lorem ipsum dolor sit amet consectetuer senectus leo scelerisque cursus.</p>
                <p>Fames justo consectetuer ut Aenean feugiat turpis pretium nec id.</p>
                <p>Tellus pharetra parturient ipsum Nullam pede lacus orci sed condimentum auctor. Sit mus.</p>
                <p>Ac urna enim Sed condimentum wisi rhoncus quam cursus pellentesque sociis. Ante sit Donec eros neque et Proin.</p>
                <p>Urna Vivamus Vestibulum ligula interdum nascetur orci enim accumsan turpis tincidunt. Mollis justo Fusce.</p>
                <p>Lorem ipsum dolor sit amet consectetuer senectus leo scelerisque cursus.</p>
                <p>Fames justo consectetuer ut Aenean feugiat turpis pretium nec id.</p>
                <p>Tellus pharetra parturient ipsum Nullam pede lacus orci sed condimentum auctor. Sit mus.</p>
                <p>Ac urna enim Sed condimentum wisi rhoncus quam cursus pellentesque sociis. Ante sit Donec eros neque et Proin.</p>
                <p>Urna Vivamus Vestibulum ligula interdum nascetur orci enim accumsan turpis tincidunt. Mollis justo Fusce.</p>
                <p>Lorem ipsum dolor sit amet consectetuer senectus leo scelerisque cursus.</p>
                <p>Fames justo consectetuer ut Aenean feugiat turpis pretium nec id.</p>
                <p>Tellus pharetra parturient ipsum Nullam pede lacus orci sed condimentum auctor. Sit mus.</p>
                <p>Ac urna enim Sed condimentum wisi rhoncus quam cursus pellentesque sociis. Ante sit Donec eros neque et Proin.</p>
                <p>Urna Vivamus Vestibulum ligula interdum nascetur orci enim accumsan turpis tincidunt. Mollis justo Fusce.</p>
                <p>Lorem ipsum dolor sit amet consectetuer senectus leo scelerisque cursus.</p>
                <p>Fames justo consectetuer ut Aenean feugiat turpis pretium nec id.</p>
                <p>Tellus pharetra parturient ipsum Nullam pede lacus orci sed condimentum auctor. Sit mus.</p>
                <p>Ac urna enim Sed condimentum wisi rhoncus quam cursus pellentesque sociis. Ante sit Donec eros neque et Proin.</p>
                <p>Urna Vivamus Vestibulum ligula interdum nascetur orci enim accumsan turpis tincidunt. Mollis justo Fusce.</p>
                <p>Lorem ipsum dolor sit amet consectetuer senectus leo scelerisque cursus.</p>
                <p>Fames justo consectetuer ut Aenean feugiat turpis pretium nec id.</p>
                <p>Tellus pharetra parturient ipsum Nullam pede lacus orci sed condimentum auctor. Sit mus.</p>
                <p>Ac urna enim Sed condimentum wisi rhoncus quam cursus pellentesque sociis. Ante sit Donec eros neque et Proin.</p>
                <p>Urna Vivamus Vestibulum ligula interdum nascetur orci enim accumsan turpis tincidunt. Mollis justo Fusce.</p>
                <p>Lorem ipsum dolor sit amet consectetuer senectus leo scelerisque cursus.</p>
                <p>Fames justo consectetuer ut Aenean feugiat turpis pretium nec id.</p>
                <p>Tellus pharetra parturient ipsum Nullam pede lacus orci sed condimentum auctor. Sit mus.</p>
                <p>Ac urna enim Sed condimentum wisi rhoncus quam cursus pellentesque sociis. Ante sit Donec eros neque et Proin.</p>
                <p>Urna Vivamus Vestibulum ligula interdum nascetur orci enim accumsan turpis tincidunt. Mollis justo Fusce.</p>
                <p>Lorem ipsum dolor sit amet consectetuer senectus leo scelerisque cursus.</p>
                <p>Fames justo consectetuer ut Aenean feugiat turpis pretium nec id.</p>
                <p>Tellus pharetra parturient ipsum Nullam pede lacus orci sed condimentum auctor. Sit mus.</p>
                <p>Ac urna enim Sed condimentum wisi rhoncus quam cursus pellentesque sociis. Ante sit Donec eros neque et Proin.</p>
                <p>Urna Vivamus Vestibulum ligula interdum nascetur orci enim accumsan turpis tincidunt. Mollis justo Fusce.</p></div>
</div>
</body> 
</html>

Alter_Ego · July 9, 2011

А если так сделать?
                #wrapper {
                        width: 100%;
                        height:100%;
			padding-right: 30px;
                        overflow: scroll;
                }
Вот этот вариант более подходящий, потому что полоса прокрутки визуально исчезла, но, к сожалению, страница проскролливается не до конца.

Не переживай, мы с тобой

<!DOCTYPE html>
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title>

        <style>
                body, html { height: 100%; }
                body { overflow: hidden;}
                #wrapper {
                        width: 100%;
                        height:100%;
						padding-right: 30px;

                        overflow: scroll;
                }
				#wrapper div {padding-bottom: 30px; }
        </style>

</head> 

<body>
<div class="container"> 
    <div id="header">  
        <ul class="top">
 [код шапки сайта]
        </ul> 
    </div> 
</div>
<div id="wrapper"><div class="c">
                <p>Lorem ipsum dolor sit amet consectetuer senectus leo scelerisque cursus.</p>
                <p>Fames justo consectetuer ut Aenean feugiat turpis pretium nec id.</p>
                <p>Tellus pharetra parturient ipsum Nullam pede lacus orci sed condimentum auctor. Sit mus.</p>
                <p>Ac urna enim Sed condimentum wisi rhoncus quam cursus pellentesque sociis. Ante sit Donec eros neque et Proin.</p>
                <p>Urna Vivamus Vestibulum ligula interdum nascetur orci enim accumsan turpis tincidunt. Mollis justo Fusce.</p>
                <p>Lorem ipsum dolor sit amet consectetuer senectus leo scelerisque cursus.</p>
                <p>Fames justo consectetuer ut Aenean feugiat turpis pretium nec id.</p>
                <p>Tellus pharetra parturient ipsum Nullam pede lacus orci sed condimentum auctor. Sit mus.</p>
                <p>Ac urna enim Sed condimentum wisi rhoncus quam cursus pellentesque sociis. Ante sit Donec eros neque et Proin.</p>
                <p>Urna Vivamus Vestibulum ligula interdum nascetur orci enim accumsan turpis tincidunt. Mollis justo Fusce.</p>
                <p>Lorem ipsum dolor sit amet consectetuer senectus leo scelerisque cursus.</p>
                <p>Fames justo consectetuer ut Aenean feugiat turpis pretium nec id.</p>
                <p>Tellus pharetra parturient ipsum Nullam pede lacus orci sed condimentum auctor. Sit mus.</p>
                <p>Ac urna enim Sed condimentum wisi rhoncus quam cursus pellentesque sociis. Ante sit Donec eros neque et Proin.</p>
                <p>Urna Vivamus Vestibulum ligula interdum nascetur orci enim accumsan turpis tincidunt. Mollis justo Fusce.</p>
                <p>Lorem ipsum dolor sit amet consectetuer senectus leo scelerisque cursus.</p>
                <p>Fames justo consectetuer ut Aenean feugiat turpis pretium nec id.</p>
                <p>Tellus pharetra parturient ipsum Nullam pede lacus orci sed condimentum auctor. Sit mus.</p>
                <p>Ac urna enim Sed condimentum wisi rhoncus quam cursus pellentesque sociis. Ante sit Donec eros neque et Proin.</p>
                <p>Urna Vivamus Vestibulum ligula interdum nascetur orci enim accumsan turpis tincidunt. Mollis justo Fusce.</p>
                <p>Lorem ipsum dolor sit amet consectetuer senectus leo scelerisque cursus.</p>
                <p>Fames justo consectetuer ut Aenean feugiat turpis pretium nec id.</p>
                <p>Tellus pharetra parturient ipsum Nullam pede lacus orci sed condimentum auctor. Sit mus.</p>
                <p>Ac urna enim Sed condimentum wisi rhoncus quam cursus pellentesque sociis. Ante sit Donec eros neque et Proin.</p>
                <p>Urna Vivamus Vestibulum ligula interdum nascetur orci enim accumsan turpis tincidunt. Mollis justo Fusce.</p>
                <p>Lorem ipsum dolor sit amet consectetuer senectus leo scelerisque cursus.</p>
                <p>Fames justo consectetuer ut Aenean feugiat turpis pretium nec id.</p>
                <p>Tellus pharetra parturient ipsum Nullam pede lacus orci sed condimentum auctor. Sit mus.</p>
                <p>Ac urna enim Sed condimentum wisi rhoncus quam cursus pellentesque sociis. Ante sit Donec eros neque et Proin.</p>
                <p>Urna Vivamus Vestibulum ligula interdum nascetur orci enim accumsan turpis tincidunt. Mollis justo Fusce.</p>
                <p>Lorem ipsum dolor sit amet consectetuer senectus leo scelerisque cursus.</p>
                <p>Fames justo consectetuer ut Aenean feugiat turpis pretium nec id.</p>
                <p>Tellus pharetra parturient ipsum Nullam pede lacus orci sed condimentum auctor. Sit mus.</p>
                <p>Ac urna enim Sed condimentum wisi rhoncus quam cursus pellentesque sociis. Ante sit Donec eros neque et Proin.</p>
                <p>Urna Vivamus Vestibulum ligula interdum nascetur orci enim accumsan turpis tincidunt. Mollis justo Fusce.</p>
                <p>Lorem ipsum dolor sit amet consectetuer senectus leo scelerisque cursus.</p>
                <p>Fames justo consectetuer ut Aenean feugiat turpis pretium nec id.</p>
                <p>Tellus pharetra parturient ipsum Nullam pede lacus orci sed condimentum auctor. Sit mus.</p>
                <p>Ac urna enim Sed condimentum wisi rhoncus quam cursus pellentesque sociis. Ante sit Donec eros neque et Proin.</p>
                <p>Urna Vivamus Vestibulum ligula interdum nascetur orci enim accumsan turpis tincidunt. Mollis justo Fusce.</p></div>
</div>
</body> 
</html>

Спасибо, но этот вариант не подходит. Дело в div'ах

Вот я проверил этот код, который выше, он там работает хорошо, но у меня на сайте -- нет. Наверное, из-за CSS.

P.S. Если необходим код моей страницы, могу отправить в личные сообщения (если они тут имеются) или на почту.

Edited July 9, 2011 by Alter_Ego

psywalker · July 9, 2011

Alter_Ego, Скинь мне на почту ссылку psywalker09@gmail.com

Alter_Ego · July 9, 2011

Благодарю администратора psywalker за помощь! Задача решена!

Sign In

Полоса прокрутки

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information