Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
SanychBY
39 / 46 / 3
Регистрация: 04.06.2013
Сообщений: 1,532
#1

Прокрутка страницы - HTML, CSS

04.04.2014, 20:52. Просмотров 595. Ответов 3
Метки нет (Все метки)

Здравствуйте.
На странице я создаю что-то на подобии окна с помощью див.
http://www.cyberforum.ru/html/thread1718390.html
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
display: block;
position: fixed;
width: 50%;
left: 24.5%;
padding: 5px;
top: 15%;
height: auto;
margin: 0 auto;
position: absolute;
right: auto;
z-index: 9900;
border: 1px solid #CDD3FF;
background-image: none;
background-color: #FFF;
border-radius: 10px;
box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.5);
font-family: 'Verdana',serif;
И маску для затемнения
CSS
1
2
3
4
5
6
7
8
9
10
11
display: block;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9000;
background-color: #000;
opacity: 0.5;
При этом мы спокойно можем скроллить страницу вверх и вниз. Как сделать так, чтобы скролинг "переключался" со страницы на окно: если окно не влазит, то прокрутка шла по его размеру высоты, а не размеру страницы? Спасибо.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
04.04.2014, 20:52
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Прокрутка страницы (HTML, CSS):

прокрутка страницы при динамическом изменении размеров div'a
Доброго времени суток! Есть небольшая проблемка на сайте, есть div с...

Параллельная вертикальная прокрутка двух блоков и отдельная горизонтальная прокрутка одного из двух блоков
Всем привет! Помогите решить проблему, пожалуйста. Есть блок div, внутри...

Как сделать так, чтобы задний фон страницы не прокручивался вместе с передним фоном страницы ?
Как сделать так, чтобы задний фон страницы не прокручивался вместе с передним...

Прокрутка
Привет всем. <div class="scroll" style="height: 200px"> <div...

Горизонтальная прокрутка
Добрый день. У меня следующая проблема. Есть разметка <div...

3
Mr Coder
577 / 382 / 138
Регистрация: 04.04.2013
Сообщений: 1,652
05.04.2014, 23:14 #2
SanychBY, такого нельзя сделать.
0
SanychBY
39 / 46 / 3
Регистрация: 04.06.2013
Сообщений: 1,532
05.04.2014, 23:19  [ТС] #3
Mr Coder, в вк сделано
0
Vladislav WebDev
324 / 214 / 97
Регистрация: 04.11.2012
Сообщений: 638
06.04.2014, 02:48 #4
Цитата Сообщение от Mr Coder Посмотреть сообщение
такого нельзя сделать.
Можно!
SanychBY, например с помощью джаваскрипта. Я приведу пример на jQuery для компактности:
HTML5
1
2
3
4
5
6
7
8
9
<div id="window">
    <div id="wrapper">
        <div id="content">
            <p>
                Some very long text
            </p>
        </div>
    </div>
</div>
CSS
1
2
3
4
5
6
7
#wrapper {
    background: #0cf;
    height: 500px;
    width: 300px;
    overflow: hidden;
    position: fixed;
}
Javascript
1
2
3
4
5
$("#window").height($("#content").height() * $(window).height()/$("#wrapper").height() - $("#wrapper").height())
 
$(document).scroll(function(e) {
    $("#wrapper").scrollTop($(this).scrollTop())
})
Живой пример в действии http://jsbin.com/qaxekewo/1/
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
06.04.2014, 02:48
Привет! Вот еще темы с решениями:

Прокрутка контента
Здраствуйте! При клике по текстовому полю(скажем для ввода мейла) то может...

Не работает прокрутка
Если в окне слишком много текста, то необходима вертикальная прокрутка. Но она...

Прокрутка справа
Приветствую всех. Делаю первую в своей жизни верстку :) Столкнулся с...

Горизонтальная прокрутка
Как создать эффект который есть на сайте google. При уменьшении размера окна...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru