Посекционный скроллинг

@духачевский · Регистрация: 13.11.2014

Студворк — интернет-сервис помощи студентам

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

Я теоретически это представляю так. В начале лендинга имеется две секции, одна с видео и одна ниже с другим контентом, каждой секции присваиваю id и затем отлавливаю событие wheel на каждой из этой секции, после того как будет поймано событие перемещать body по оси Y используя transform:translate3d() на 100% вверх или вниз. Но вот как это прописать кодом, я не понимаю так как в js не силен.

Помогите пожалуйста реализовать задуманное

Слепил преблизительную разметку тут http://codepen.io/bogdanovich/pen/oxZXze

Заранее всем большое спасибо)

@Shakalaka · 19.03.2016, 16:00

духачевский, http://alvarotrigo.com/fullPage/

@духачевский · 19.03.2016, 16:12 **[ТС]**

Спасибо, но такие плагины мне не подходят, я уже пробовал. Я забыл указать на то что после перехода на основной контент после видео дальше должен работать стандартный скролл

@Shakalaka · 19.03.2016, 19:12

HTML5
1
2
3
4
5
6
<div class="slide">
    <div class="slide__inner">
        нажмите стрелку "вниз"
    </div>
</div>
<div class="rest">нажмите стрелку "вверх"</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
*{
  box-sizing:border-box;
}
html, body{
  margin:0;
  padding:0;
}
.slide{
  background:#333;
  overflow:hidden;
  transition:height .5s;
  color:#fff;
  text-align:center;
  font-size:50px;
  position:relative;
}
.slide__inner{
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
}
.rest{
  background:#0f0;
  height:2000px;
  text-align:center;
  font-size:50px;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
var HEIGHT = getWindowHeight();
var SLIDE = document.querySelector(".slide");
 
function getWindowHeight(){
    return window.innerHeight;
}
 
function watchScroll(direction){
    if(direction == "bottom"){
        SLIDE.style.height = "0";
        document.body.style.overflow = "visible";
    }
    else{
        SLIDE.style.height = HEIGHT + "px";
        document.body.style.overflow = "hidden";
    }
}
 
function init(){
    SLIDE.style.height = HEIGHT + "px";
}
 
 
document.onwheel = function(e){
    if(e.deltaY > 0 && window.pageYOffset == 0){
        watchScroll("bottom");
    }
    else if(e.deltaY < 0 && window.pageYOffset == 0){
        watchScroll("top");
    }
}
 
document.onkeydown = function(e){
    var code = e.which || e.keyCode
    if(code == 40 && window.pageYOffset == 0){
        watchScroll("bottom");
    }
    else if(code == 38 && window.pageYOffset == 0){
        watchScroll("top");
    }
}
 
window.onload = function(){
    if(window.pageYOffset == 0){
        document.body.style.overflow = "hidden";
        init();
    }
}
window.onresize = init;

http://codepen.io/anon/pen/grmavp
У меня нет мышки, так что проверить работоспособность wheel я не могу...
Сделал по нажатию стрелок на клаве. Плюс на touch устройствах это работать не будет, нужно доделывать

А вообще затея, честно говоря, дебильная...

@духачевский · 19.03.2016, 19:22 **[ТС]**

Спасибо вам большое это как раз то что я и хотел) А почему вы считаете что затея дибильная? Дизайнер решил что так все будет выглядеть круто)

@Shakalaka · 19.03.2016, 19:40

Сообщение от духачевский

А почему вы считаете что затея дибильная?

Люди проводят исследования, книги пишут, все чтобы улучшить юзабилити сайтов, а с такими вот "дизайнами" человек должен догадываться что же ему нужно сделать... Скролл то появляется, то исчезает. Вот у меня, допустим, дома мышки нет вообще, получается в вашем сайте я бы дальше первого слайда не дошел бы.. Опять же, под touch устройства нужны дополнительные пляски с бубном.

@духачевский · 20.03.2016, 19:13 **[ТС]**

Да я понимаю о чём вы говорите. Но я навесил на body overflow:hidden, что бы скролл не выскакивал, и везде все работает, даже на ноутбуке попробовал тачпадом крутить, тоже все в порядке. Я еще проверю на других устройствах и если будут косяки то не буду это использовать. Еще раз большое спасибо)

Новые блоги и статьи Все статьи Все блоги /
Вывод данных через динамический список в справочнике Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .
Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .	Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .

@духачевский 0 / 0 / 0 Регистрация: 13.11.2014 Сообщений: 57

	Посекционный скроллинг 19.03.2016, 15:38. Показов 3004. Ответов 6 Метки нет (Все метки) Всем привет друзья. Вчера столкнулся с нетривиальной для меня задачей. Помогите пожалуйста разобраться как проще реализовать задуманное дизайнером. Имеется лендинг на первом экране которого размещается видео, оно должно быть на всю высоту экрана, далее следует остальной контент. Требуется при первом открытии страницы переходить к дальнейшему контенту не скроллингом а по событию wheel, т.е только пользователь должен начать крутить колесико и попадать на остальной контент только плавно, и наоборот находясь на секции на одну ниже чем это самое видео попасть на вверх нужно не скроллингом а так же при первой попытке начать крутить колесико мыши вверх. Я теоретически это представляю так. В начале лендинга имеется две секции, одна с видео и одна ниже с другим контентом, каждой секции присваиваю id и затем отлавливаю событие wheel на каждой из этой секции, после того как будет поймано событие перемещать body по оси Y используя transform:translate3d() на 100% вверх или вниз. Но вот как это прописать кодом, я не понимаю так как в js не силен. Помогите пожалуйста реализовать задуманное Слепил преблизительную разметку тут http://codepen.io/bogdanovich/pen/oxZXze Заранее всем большое спасибо) 0

@Shakalaka 653 / 556 / 322 Регистрация: 27.01.2015 Сообщений: 1,374
	19.03.2016, 16:00
	духачевский, http://alvarotrigo.com/fullPage/ 0

@духачевский 0 / 0 / 0 Регистрация: 13.11.2014 Сообщений: 57
	19.03.2016, 16:12 [ТС]
	Спасибо, но такие плагины мне не подходят, я уже пробовал. Я забыл указать на то что после перехода на основной контент после видео дальше должен работать стандартный скролл 0

@духачевский 0 / 0 / 0 Регистрация: 13.11.2014 Сообщений: 57
	19.03.2016, 19:22 [ТС]
	Спасибо вам большое это как раз то что я и хотел) А почему вы считаете что затея дибильная? Дизайнер решил что так все будет выглядеть круто) 0

@духачевский 0 / 0 / 0 Регистрация: 13.11.2014 Сообщений: 57
	20.03.2016, 19:13 [ТС]
	Да я понимаю о чём вы говорите. Но я навесил на body overflow:hidden, что бы скролл не выскакивал, и везде все работает, даже на ноутбуке попробовал тачпадом крутить, тоже все в порядке. Я еще проверю на других устройствах и если будут косяки то не буду это использовать. Еще раз большое спасибо) 0

Посекционный скроллинг

Решение