Прокрутка скроллом на высоту блоков

#javascript #jquery #scroll #веб_дизайн

                    
Как сделать чтобы при скролле прокрутка страницы происходила ровно на высоту блоков,
которые в ней находятся (код внутри)?

Не хочу использовать библиотеки, потому что, наверняка, нужно дописать 2-5 строк
кода, чтобы решить вопрос с прокруткой страницы при скролле на высоту блока (на заданное
количество пикселей).

И второй вопрос, как сделать эту прокрутку плавной, чтобы не было ощущения, что просто
переключили блок с одного на другой.


function slide() {
  h = document.documentElement.clientHeight
  $(".one, .two, .three").css('height', h);
};

$(window).resize(slide);
$(document).ready(slide);
.one,
.two,
.two {
  display: block;
  position: relative;
  width: 100%;
}
.one {
  background: #CD5;
}
.two {
  background: aquamarine;
}
.three {
  background: #2196F3;
}







    

Ответы

Ответ 1

Эврика!



function slide() {
  h = document.documentElement.clientHeight
  $(".one, .two, .three").css('height', h);
};
$(window).resize(slide);
$(document).ready(slide);


$(document).bind('mousewheel DOMMouseScroll', function(event) {
  scroll(event);
});

var num = 1;
var scrolling = false;

function scroll(event) {
  event.preventDefault();
  if (!scrolling) {
    scrolling = true;
    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
      num--;
      num = num < 1 ? 1 : num;
    } else {
      num++;
      num = num > 3 ? 3 : num;
    }

    $('html, body').animate({
      scrollTop: $(".num" + num).offset().top
    }, 500, "linear", function() {
      scrolling = false;
    });
  }
}
.one,
.two,
.two {
  display: block;
  position: relative;
  width: 100%;
}
.one {
  background: #CD5;
}
.two {
  background: aquamarine;
}
.three {
  background: #2196F3;
}

Динамическая подгрузка при прокрутке экрана

#android #listview #scroll

Привет всем!!!
Мое приложение умеет загружать данные с сервера и выводить их списком на экран.
Мне же нужно сделать так, чтобы данные выводились при прокрутке экрана, а не сразу
всей кучей.
Как это сделать?
Очень хочется увидеть пример, в котором что-то грузиться с инета и подгружается с
прокрутом экрана.    

Ответы

Ответ 1

Сам так не делал, но делал бы так:

Данные извлекать из базы не одним запросом, а по n штук в запросе.
При первом открытии страницы извлекаем первые n.
Проверяем при каждом скроллировании экрана, дошли ли до конца экрана или нет.
Если дошли, то подгружаем следующие n записей.


Ответ 2

На то существует понятие CursorAdapter - он сам автоматом будет "подсасывать" нужное
количество записей. Почитайте мануалы, погуглите по примерам использования CursorAdapter


Ответ 3

http://android-helper.com.ua/pull-to-refresh/
большой, но хороший пример

Предложите вариант скролл-эффекта

#javascript #jquery #scroll #parallax

Хочу вставить в страницу невысокую полоску (как в примере) с картинкой, реагирующей
на скролл. По сценарию, фоновая картинка имеет большую высоту, чем блок. При прокрутке
она движется чуть быстрее и успевает показаться полностью, пока движется по вьюпорту.
Подскажите, пожалуйста, низкоуровневый вариант скрипта для изучения. Ванильный JS
или базовый jquery, только в новичковой манере.
Или псевдокод.
Как я представляю: скрипт определяет, когда блок окажется во вьюпорте; в зависимости
от направления "подхода" ставит стартовое положение фона (у верхнего края блока или
у нижнего); на основании высоты вьюпорта устанавливает коэффициент на скорость прокрутки
фона; ну и крутит его, то бишь меняет вертикальную координату фона в блоке в линейной
зависимости от прокрутки окна...



.placeholder {
  height: 50vh;
  background-color: #f99;
}

.parallax {
  height: 100px;
  width: 100%;
  background-color: #bef;
  background: url(http://via.placeholder.com/800x600/995577/777777/?
  text=imageimageimageimage) center center;
  text-align: center;
}

h1 {
  display: inline-block;
}


  
параллакс





    

Ответы

Ответ 1

Делюсь таким вариантом (самым простым), главное тут сам смысл. Используем jQuery,
не забудьте её подключить. Поймете как тут все устроено, тогда и любой более сложный
создадите.



$(document).ready(function () {
  var $window = $(window);
  $('div[data-type="background"]').each(function () {
    var bg = $(this);
    $(window).scroll(function() {
      var yPos = -($window.scrollTop()/bg.data('speed'));
      var coords = '50%' + yPos + 'px';
      bg.css({
        backgroundPosition : coords
      });
    });
  });
});
.placeholder {
  height: 50vh;
  background-color: #f99;
  margin: 0 auto;
  width: 100%;
  background: url(https://i.imgur.com/Blmzdc3.jpg) no-repeat center top fixed;
  background-size: cover;
  position:relative;
}

.parallax {
  height: 250px;
  width: 100%;
  background-color: #bef;
  text-align: center;
}

h1 {
  display: inline-block;
}


параллакс

Горизонтальный скроллинг на мобильных экранах

#javascript #html #css #scroll

Нужно сделать горизонтальный скроллинг одного блока на мобильных экранах, а именно,
чтобы появлялась стрелка вправо, и влево, если контент будет и слева. Какие есть методы
решения?
Прикрепляю скрин, как должно это выглядеть 


    

Ответы

Ответ 1

Честное слово, мне очень стыдно за этот код, писал буквально на коленке =\
Может поможет или хотя бы натолкнет на мысль:



var button_left = $("#button-left");
var button_right = $("#button-right");

button_right.on("click", function(){

	var box = $('.container'); 
	var content = $('.content');
  var box_width = box.width();
  var content_width = content.width();
  var max_scroll = content_width - box_width;
  var cur_scroll = Math.abs(parseInt( content.css('left') ));
  
  if( cur_scroll + 30 < max_scroll ) {
  	content.css('left', '-' + (cur_scroll + 30) + 'px');
  } else {
  	content.css('left', '-' + (max_scroll) + 'px');
  }
  

});


button_left.on("click", function(){

	var box = $('.container'); 
	var content = $('.content');
  var box_width = box.width();
  var content_width = content.width();
  var cur_scroll = Math.abs(parseInt( content.css('left') ));
  
  if( cur_scroll - 30 >= 0 ) {
  	content.css('left', '-' + (cur_scroll - 30) + 'px');
  } else {
  	content.css('left', '0px');
  }
  

});
.container {
  height: 200px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.content{
  height: 200px;
  left: 0;
  position: absolute;
  top: 0;
  width: 200%;
  z-index: 1;
  TRANSITION: .2S;
}

.button {
  CURSOR: POINTER;
  background: #0084ff;
  border: none;
  border-radius: 50%;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
  height: 50px;
  position: absolute;
  top: 50%;
  width: 50px;
  z-index: 2;
}
.button-left {
  left: 0px;
}
.button-right {
  right: 0px;
}


  
left

  

    фдвофвдовдафовжф ы вдофыв жфоыв фывоа фывжаофыва
    фвы фыжваофывэафоывафыво фываофыважфывоафжывофывжа офывафэыва офывжа
    фыжв офвыаж фыовафжы ваофывжа фывоаф ыжвдаофы вжадфоы вафжыдва офывжадо
  
  
  
right



Ответ 2

Подключи слайдер, например, slick slider (документация)

Пример работы слайдера:



if ( $.fn.slick ) {
    $('.comp-card__slider').slick({
        infinite: true,
        slidesToShow: 5,
        slidesToScroll: 1,
        arrows:true,
        speed: 300,
        variableWidth: false
    });
}
.comp-card__slider .slider__image {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    height:120px;
    width:60px;
    margin: 5px;
}



  

  

  

  

  

  

  

  










О более тонкой настройке слайдера почитай в интернетах

Плавный скролинг по секциям на чистом javascript

#javascript #анимация #scroll

На сайте нужно реализовать плавную прокрутку по секциям на чистом javascript, без
всяких плагинов и библиотек.

Есть код: 



var height = document.querySelector("section").clientHeight;

(function() {
  var supportOffset = window.pageYOffset !== undefined,
    lastKnownPos = 0,
    ticking = false,
    scrollDir;

  function doSomething(scrollPos, scrollDir) {
    if (scrollDir === 'down') {
      window.scrollBy(0, height);
    }
    console.log('scroll pos: ' + scrollPos + ' | scroll dir: ' + scrollDir);
  }

  window.addEventListener('wheel', function(e) {
    currYPos = supportOffset ? window.pageYOffset : document.body.scrollTop;
    scrollDir = lastKnownPos > currYPos ? 'up' : 'down';
    lastKnownPos = currYPos;

    if (!ticking) {
      window.requestAnimationFrame(function() {
        doSomething(lastKnownPos, scrollDir);
        ticking = false;
      });
    }
    ticking = true;
  });
})();
* {
  padding: 0;
  margin: 0;
}

section {
  height: 100vh;
  background-color: pink;
  display: flex;
  flex-wrap: wrap;
}

section:last-child {
  background-color: green;
}

.item {
  width: 33.1605%;
  background-color: #f3f3f3;
  margin: 1px;
}


  

    

    

    

  
  







Как видно, прокрутка работает криво, не пойми как, хотелось бы, чтобы она была плавная
и по секциям, никак не получается додумать скрипт. Прошу помощи.
    

Ответы

Ответ 1

Краткость - сестра таланта)))



window.addEventListener('wheel', function(e) {
  e.preventDefault();
  if (e.deltaY < 0) scrollToSection('first');
  else scrollToSection('second');
});

function scrollToSection(id) {
  document.getElementById(id).scrollIntoView({
    behavior: 'smooth'
  });
}
* {
  padding: 0;
  margin: 0;
}

section {
  height: 100vh;
  background-color: pink;
  display: flex;
  flex-wrap: wrap;
}

section:last-child {
  background-color: green;
}

.item {
  width: 33.1605%;
  background-color: #f3f3f3;
  margin: 1px;
}


  

    

    

    

  
  







А это для секций, которых > 2



const sections = [...document.getElementsByTagName('section')];
let currentSection = 0;

window.addEventListener('wheel', function(e) {
  e.preventDefault();

  (e.deltaY < 0) ? --currentSection: ++currentSection;

  if (currentSection < 0) currentSection = 0;
  else if (currentSection > (sections.length - 1)) currentSection = (sections.length
- 1);

  scrollToSection(currentSection);
});

function scrollToSection(i) {
  document.getElementById(sections[i].id).scrollIntoView({
    behavior: 'smooth'
  });
}
* {
  padding: 0;
  margin: 0;
}

section {
  height: 100vh;
  background-color: pink;
  display: flex;
  flex-wrap: wrap;
}

section:nth-child(2) {
  background-color: green;
}

section:nth-child(3) {
  background-color: red;
}

section:last-child {
  background-color: blue;
}

.item {
  width: 33.1605%;
  background-color: #f3f3f3;
  margin: 1px;
}


  

    

    

    

  
  

  

  

Смена изображения при клике на кнопку

#javascript #html #css #scroll

Есть задача -нужен блок, где можно будет прокрутить длинное изображение (или несколько
стоящих в ряд) горизонтальным скроллом влево-вправо. Скролл должен начинаться с середины. 
На данный момент реализовал так:



.wrap {
  width: 400px;
  height: 200px;
  overflow-x: auto;
  overflow-y: hidden;
}

.wrap ul {
  min-width: 100%;
  white-space: nowrap;
  padding: 0;
}

.wrap li {
  display: inline-block;
  vertical-align: top;
  width: 200px;
  height: 200px;
  margin-right: -10px;
}

.wrap li img {
  max-width: 100%;
}

  

    
изображение 1
    
изображение 2
    
изображение 3
  





Нашел в интернете, что с помощью $(selector).scrollleft(position) можно поставить
изначальную позицию скролла на середину, но не удалось это прописать. Версткой недавно
занимаюсь, в скриптах смыслю пока что мало, прошу совета) Так же попутно есть вопрос,
есть ли кроссбраузерные решения для изменения внешности скроллбара? А то пишут через
css только на IE работает
    

Ответы

Ответ 1

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



$(document).ready(function() {
  $('.wrapper').scrollLeft(400);
});
* {
  margin: 0;
  padding: 0;
}
img {
  display: block;
  height: 230px;
  position: relative;
}
.wrapper {
  width: 700px;
  margin: auto;
  border: 3px solid red;
  overflow-x: scroll;
}
.main {
  width: 100%;
}

  


    
  





Ответ 2

Вам в помощь javascript.
На чистом css можно сделать подобное через псевдокласс :focus или :active на кнопку,
а к псевдоклассу привязать анимацию @keyframes, которая будет двигать картинку 
при этом должен быть body: {overflow-x: hidden;} чтобы горизонтальная прокрутка была
спрятана, ее также можно активировать через псевдокласс :focus или :active если столь
необходимо будет.


Ответ 3

Уже была похожая тема(моя кстати) - Вертикальный слайдер. Как сделать карусель?.
Используя ответ @рони, вот пример на нативном



document.querySelector(".carousel-module").addEventListener("click", function(e) {
  var parent = document.querySelector(".img-container"),
    first = parent.querySelector(".item-img"),
    last = parent.querySelector(".item-img:last-child");
  if (e.target.classList.contains("arrow-left")) {
    parent.appendChild(first)
  }
  if (e.target.classList.contains("arrow-right")) {
    parent.insertBefore(last, first)
  }
});
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0
}

.carousel-module {
  margin-top: 100px;
  min-width: 660px;
  text-align: center
}

.img-container {
  display: inline-block;
  position: relative;
  height: 100px;
  width: 600px;
  border: 2px solid #000;
  overflow: hidden
}

.arrow-left,
.arrow-right {
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  cursor: pointer;
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s
}

.arrow-left {
  border-width: 50px 20px 50px 0;
  border-color: transparent #000000 transparent transparent
}

.arrow-right {
  border-width: 50px 0 50px 20px;
  border-color: transparent transparent transparent #000000
}

.arrow-left:active,
.arrow-right:active {
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8)
}

.item-img {
  position: absolute;
  top: 50%;
  left: 50%;
  cursor: pointer;
  -webkit-transition: .7s;
  -o-transition: .7s;
  transition: .7s
}

.item-img:nth-of-type(1) {
  -webkit-transform: translate(-530%, -50%);
  -ms-transform: translate(-530%, -50%);
  transform: translate(-530%, -50%)
}

.item-img:nth-of-type(2) {
  -webkit-transform: translate(-410%, -50%);
  -ms-transform: translate(-410%, -50%);
  transform: translate(-410%, -50%)
}

.item-img:nth-of-type(3) {
  -webkit-transform: translate(-290%, -50%);
  -ms-transform: translate(-290%, -50%);
  transform: translate(-290%, -50%)
}

.item-img:nth-of-type(4) {
  -webkit-transform: translate(-170%, -50%);
  -ms-transform: translate(-170%, -50%);
  transform: translate(-170%, -50%)
}

.item-img:nth-of-type(5) {
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%)
}

.item-img:nth-of-type(6) {
  -webkit-transform: translate(70%, -50%);
  -ms-transform: translate(70%, -50%);
  transform: translate(70%, -50%)
}

.item-img:nth-of-type(7) {
  -webkit-transform: translate(190%, -50%);
  -ms-transform: translate(190%, -50%);
  transform: translate(190%, -50%)
}

.item-img:nth-of-type(8) {
  -webkit-transform: translate(310%, -50%);
  -ms-transform: translate(310%, -50%);
  transform: translate(310%, -50%)
}

.item-img:nth-of-type(9) {
  -webkit-transform: translate(430%, -50%);
  -ms-transform: translate(430%, -50%);
  transform: translate(430%, -50%)
}

  

  

  

Как “нащупать дно” (отследить момент касания конца страницы) при скроллинге на мобильном устройстве?

#javascript #jquery #scroll #мобильная_разработка

Подобная конструкция работает только для стационарной версии:

$(window).scroll(function() {
    if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
        ...


Моб. устройства просто не понимают, что ты достиг конца страницы при скроллинге...
Задумка проста: нужно при скроллинге до низа страницы подгружать контент на манер
бесконечной подгрузки контента.

Каким образом можно "словить" этот момент?
    

Ответы

Ответ 1

Запускал локальный сервер с помощью Gulp, на компе брузер Chrome работает, на мобилке
браузер Safari на Iphone7 работает. 



$(window).on('scroll', function(e){
    if ($('html, body').scrollTop()+$(window).height() == document.documentElement.scrollHeight) {
        $('body').append('
lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem 
')
    }
});
p{
  color: coral;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim voluptate ex unde.
Ex tenetur veniam dolores enim, tempore deserunt provident. Suscipit non quaerat blanditiis
impedit, voluptatibus mollitia odio voluptates sequi. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Nulla, qui ratione vel ullam saepe odio, eveniet sapiente quas libero
cum ipsa, minus a magni. Atque, vitae ipsum nihil facilis earum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim voluptate ex unde.
Ex tenetur veniam dolores enim, tempore deserunt provident. Suscipit non quaerat blanditiis
impedit, voluptatibus mollitia odio voluptates sequi. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Nulla, qui ratione vel ullam saepe odio, eveniet sapiente quas libero
cum ipsa, minus a magni. Atque, vitae ipsum nihil facilis earum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim voluptate ex unde.
Ex tenetur veniam dolores enim, tempore deserunt provident. Suscipit non quaerat blanditiis
impedit, voluptatibus mollitia odio voluptates sequi. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Nulla, qui ratione vel ullam saepe odio, eveniet sapiente quas libero
cum ipsa, minus a magni. Atque, vitae ipsum nihil facilis earum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim voluptate ex unde.
Ex tenetur veniam dolores enim, tempore deserunt provident. Suscipit non quaerat blanditiis
impedit, voluptatibus mollitia odio voluptates sequi. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Nulla, qui ratione vel ullam saepe odio, eveniet sapiente quas libero
cum ipsa, minus a magni. Atque, vitae ipsum nihil facilis earum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim voluptate ex unde.
Ex tenetur veniam dolores enim, tempore deserunt provident. Suscipit non quaerat blanditiis
impedit, voluptatibus mollitia odio voluptates sequi. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Nulla, qui ratione vel ullam saepe odio, eveniet sapiente quas libero
cum ipsa, minus a magni. Atque, vitae ipsum nihil facilis earum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim voluptate ex unde.
Ex tenetur veniam dolores enim, tempore deserunt provident. Suscipit non quaerat blanditiis
impedit, voluptatibus mollitia odio voluptates sequi. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Nulla, qui ratione vel ullam saepe odio, eveniet sapiente quas libero
cum ipsa, minus a magni. Atque, vitae ipsum nihil facilis earum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim voluptate ex unde.
Ex tenetur veniam dolores enim, tempore deserunt provident. Suscipit non quaerat blanditiis
impedit, voluptatibus mollitia odio voluptates sequi. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Nulla, qui ratione vel ullam saepe odio, eveniet sapiente quas libero
cum ipsa, minus a magni. Atque, vitae ipsum nihil facilis earum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim voluptate ex unde.
Ex tenetur veniam dolores enim, tempore deserunt provident. Suscipit non quaerat blanditiis
impedit, voluptatibus mollitia odio voluptates sequi. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Nulla, qui ratione vel ullam saepe odio, eveniet sapiente quas libero
cum ipsa, minus a magni. Atque, vitae ipsum nihil facilis earum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim voluptate ex unde.
Ex tenetur veniam dolores enim, tempore deserunt provident. Suscipit non quaerat blanditiis
impedit, voluptatibus mollitia odio voluptates sequi. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Nulla, qui ratione vel ullam saepe odio, eveniet sapiente quas libero
cum ipsa, minus a magni. Atque, vitae ipsum nihil facilis earum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim voluptate ex unde.
Ex tenetur veniam dolores enim, tempore deserunt provident. Suscipit non quaerat blanditiis
impedit, voluptatibus mollitia odio voluptates sequi. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Nulla, qui ratione vel ullam saepe odio, eveniet sapiente quas libero
cum ipsa, minus a magni. Atque, vitae ipsum nihil facilis earum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim voluptate ex unde.
Ex tenetur veniam dolores enim, tempore deserunt provident. Suscipit non quaerat blanditiis
impedit, voluptatibus mollitia odio voluptates sequi. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Nulla, qui ratione vel ullam saepe odio, eveniet sapiente quas libero
cum ipsa, minus a magni. Atque, vitae ipsum nihil facilis earum.


Ответ 2

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
$(window).scroll(function() {
    var crntHeight = $(this).children("#place").height();
    if($(this).scrollTop() >= (crntHeight - $(this).height()-100)){
... {ajax} ...


Примерно такая конструкция работает на мобильном. Правда не идеально.
Может быть есть у кого-то наработки?

Андроид. Управление scrollVIew

#android #java #scroll #view

В общем проблема такая: внутри скрол вьюва лежит imageView с определёным обработчиком
касаний. И один из жестов - движение пальцем снизу вверх. Но вместо этого жест перехватывает
скроллер и экран прокручивается. Как сделать так, чтобы при проведении пальцем именно
по этой картинке работал обработчик вместо скрола?    

Ответы

Ответ 1

Я НАШЁЛ РЕШЕНИЕ!!!
В общем поэксперементировал с разными методами. Простым языком. Нужно создать свой
класс, расширяющий ScrollView, и переопределить в нём метод onInterceptTouchEvent,
написав ему всего одну единую строчку "return false". И всё =)

mousewheel smooth scroll с анимацией фигур

#javascript #jquery #scroll

Есть такой код:



var rellax = new Rellax('.rellax', {
  center: false,
  wrapper: null,
  round: true,
  vertical: true,
  horizontal: false
});


// TweenMax
$(function() {

  var $window = $(window); //Window object

  var scrollTime = 1.2; //Scroll time
  var scrollDistance = 170; //Distance. Use smaller value for shorter scroll and
greater value for longer scroll

  $window.on("mousewheel DOMMouseScroll", function(event) {

    event.preventDefault();

    var delta = event.originalEvent.wheelDelta / 120 || -event.originalEvent.detail / 3;
    var scrollTop = $window.scrollTop();
    var finalScroll = scrollTop - parseInt(delta * scrollDistance);

    //console.log(finalScroll);

    $('.leaf>img').css({
      'transform': 'rotateX(0deg)'
    });
    //$('.leaf>img').removeClass('rotate');

    TweenMax.to($window, scrollTime, {
      scrollTo: {
        y: finalScroll,
        autoKill: true
      },
      ease: Power1.easeOut,
      autoKill: true,
      overwrite: 5,
      onComplete: function() {
        $('.leaf>img').css({
          'transform': 'rotateX(50deg)'
        });
        //$('.leaf').addClass('rotate');
      }
    });

  });

});

// MouseWheel
// if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
// window.onmousewheel = document.onmousewheel = wheel;

// function wheel(event) {
//     var delta = 0;
//     if (event.wheelDelta) delta = event.wheelDelta / 220;
//     else if (event.detail) delta = -event.detail / 3;

//     handle(delta);
//     if (event.preventDefault) event.preventDefault();
//     event.returnValue = false;
// }

// var goUp = true;
// var end = null;
// var interval = null;

// function handle(delta) {
// 	var animationInterval = 20; //lower is faster
//     var scrollSpeed = 20; //lower is faster

// 	if (end == null) {
//   	end = $(window).scrollTop();
//   }
//   end -= 20 * delta;
//   goUp = delta > 0;

//   if (interval == null) {
//     interval = setInterval(function () {
//       var scrollTop = $(window).scrollTop();
//       var step = Math.round((end - scrollTop) / scrollSpeed);
//       if (scrollTop <= 0 || 
//           scrollTop >= $(window).prop("scrollHeight") - $(window).height() ||
//           goUp && step > -1 || 
//           !goUp && step < 1 ) {
//         clearInterval(interval);
//         interval = null;
//         end = null;
//       }
//       $(window).scrollTop(scrollTop + step );
//     }, animationInterval);
//   }
// }
* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  font-size: 20px;
  line-height: 2rem;
  position: relative;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  transition: all .5s ease-in-out;
}

main {
  padding: 2rem 3rem;
  text-align: center;
}

.leaf {
  display: block;
  user-select: none;
  font-size: 0;
  visibility: visible;
  opacity: 1;
  width: 20vw;
  -webkit-perspective: 500px;
  perspective: 500px;
}


/* .rotate {
  animation: rotate 1s ease-in-out;
}


@keyframes rotate {
  from { transform: rotateX(0deg); }
  50% {transform: rotateX(50deg);}
  to { transform: rotateX(0deg); }
} */

.l-2 {
  margin-left: 30%;
}

.l-3 {
  margin-left: 70%;
}

header {
  position: fixed;
  z-index: 2;
  width: 100%;
  height: auto;
  margin-top: -10%;
  -webkit-perspective: 500px;
  perspective: 500px;
}








  
    
  

  
    
  

  
    
  



  
Smooth Scroll
  
Use your mousewheel to scroll

  

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur natus,
facere nulla similique doloremque! Ullam voluptatem debitis esse. Deleniti quas, vel
ad consectetur facilis ab consequatur voluptate aut optio odit nisi reprehenderit sint,
ipsa
    incidunt itaque id voluptatum repudiandae alias esse velit quo voluptatibus recusandae
earum eligendi! Est, quae, aliquam?
  
  

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, earum ullam
hic id! Corporis cupiditate, voluptatibus eligendi suscipit ratione eos, sequi aperiam
voluptatem laboriosam! Debitis consectetur eum aperiam similique ullam dolore, labore
    porro, sequi fuga atque, tempora, est delectus veniam! Ad tempora, voluptas cupiditate
praesentium illo iure. Cupiditate, necessitatibus natus id eius nulla ab suscipit tempora
nisi itaque omnis quas, voluptates accusantium cum labore nam. Laboriosam
    alias doloremque quos adipisci pariatur ipsum doloribus et cupiditate omnis cum,
ducimus deleniti, sequi optio harum! Iste quas in, qui nobis voluptatibus quibusdam
doloremque culpa, numquam officia incidunt, quidem! Asperiores omnis amet incidunt
    eveniet.
  
  

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium animi sint
officiis, voluptate nam vitae inventore minus aliquid temporibus soluta natus, qui
repellendus ducimus eum veritatis neque impedit odio quibusdam.
  
  

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur natus,
facere nulla similique doloremque! Ullam voluptatem debitis esse. Deleniti quas, vel
ad consectetur facilis ab consequatur voluptate aut optio odit nisi reprehenderit sint,
ipsa
    incidunt itaque id voluptatum repudiandae alias esse velit quo voluptatibus recusandae
earum eligendi! Est, quae, aliquam?
  
  

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, earum ullam
hic id! Corporis cupiditate, voluptatibus eligendi suscipit ratione eos, sequi aperiam
voluptatem laboriosam! Debitis consectetur eum aperiam similique ullam dolore, labore
    porro, sequi fuga atque, tempora, est delectus veniam! Ad tempora, voluptas cupiditate
praesentium illo iure. Cupiditate, necessitatibus natus id eius nulla ab suscipit tempora
nisi itaque omnis quas, voluptates accusantium cum labore nam. Laboriosam
    alias doloremque quos adipisci pariatur ipsum doloribus et cupiditate omnis cum,
ducimus deleniti, sequi optio harum! Iste quas in, qui nobis voluptatibus quibusdam
doloremque culpa, numquam officia incidunt, quidem! Asperiores omnis amet incidunt
    eveniet.
  
  

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium animi sint
officiis, voluptate nam vitae inventore minus aliquid temporibus soluta natus, qui
repellendus ducimus eum veritatis neque impedit odio quibusdam.
  





Страничка с плавным скроллом. Листочки с parallax эффектом. 

Для плавного скролла пытаюсь использовать или mousewheel или вот рабочий вариант
с tweenMax (пока не могу выбрать какой вариант лучше).

При параллаксе листочков динамически генерируется необходимый transform:translate3d(...). 

Хотелось бы чтобы при остановке скролла анимация поворота листочка начиналась как-то
только остановили скроллить колесико (в этот момент еще неторое время стр. скроллится
сама по анимации).

Пример brontidebg.com, все то же самое хотелось бы, но намного проще с jquery.

Вопрос:

Как начать анимацию листиков (поворот rotateX(...) сразу после окончания скролла
колесиком мыши, т.е. чтобы поворот фигуры совпадал с "доскролливанием" (по анимации)
стр.  ? Получается какое-нибудь событие за секунду до onComplete.
    

Ответы

Ответ 1

Получилось реализовать подобный эффект с помощью jquery.parallax-scroll



function elements () {
    $('.element1 img').css('opacity', 0).one('inview', function(isInView) {
        if (isInView) {$(this).addClass('animated fadeInRight delayp7');}
    });

    $('.element2 img').css('opacity', 0).one('inview', function(isInView) {
        if (isInView) {$(this).addClass('animated fadeInRight delayp8');}
    });
}

elements();


$(window).scroll(function () {
    var ww = $(window).width();
  
  elements();
});
img {
  max-width: 100%;
}

.element {
    position: absolute;
    left: 50%;
}

.element.element2 {
    width: 85px;
    margin-left: 34px;
    top: 54px;
  }

.element.element4 {
    width: 85px;
    margin-left: -154px;
    top: 24px;
  }

.element.element1 {
    width: 100px;
    margin-left: -69px;
    top: 72px;
}

section {
  position: relative;
  min-height: 1500px;
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}


.delayp7 {
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
  -webkit-animation-duration: 1s;
}

.delayp8 {
  -webkit-animation-delay: 1.4s;
  animation-delay: 1.4s;
  -webkit-animation-duration: 1s;
}
  
  


  

  

  

    
  

  

    
  
 
  
  

    
  

горизонтальный scrollView

#ios #objective_c #scroll #scrollview

У меня есть горизонтальный scrollView. 0 - это стартовый экран. Хочу задать ограничения
кнопкам. next должна листать вправо от 0 до 5. back должна листать влево от 5 до 0
(не -1). Как это сделать?

-(IBAction)next:(id)sender
{
    self.currentPage++;
    CGFloat pageWidth = scroll.frame.size.width;
    [scroll setContentOffset:CGPointMake(pageWidth*self.currentPage, 0) animated:YES];
}

-(IBAction)back:(id)sender
{
    self.currentPage--;
    CGFloat pageWidth = scroll.frame.size.width;
    [scroll setContentOffset:CGPointMake(pageWidth*self.currentPage, 0) animated:YES];
}

    

Ответы

Ответ 1

в next: первой строкой дописать

if(self.currentPage == 5) return;  // или 4, если у вас 5 экранов всего


в back:

if(self.currentPage == 0) return;


чтобы просто игнорировать нажатия.


Ответ 2

Перед сдвигом проверяй scroll.contentOffset.x. Он не должен быть меньше 0 и больше
pageWidth*4.

В идеале после каждого сдвига проверяешь scroll.contentOffset.x. Если он == 0, то
деактивируешь кнопку back. Аналогично для кнопки next.

Автоматический переход к якорю. Как?

#javascript #jquery #scroll #прокрутка

Всем здравствуйте! 

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

Как такое может быть сделано?
    

Ответы

Ответ 1

Набросал маленький скрипт реализации данной функции. На первый взгляд сложновато,
но логику понять можно: У нас есть блоки с собственным скроллом. Когда мы листаем до
конца, то один блок скрывается, а второй открывается уже со своим скороллом. Тем самым
создаётся эффект, что ты начинаешь скроллить с начала страницы.



$(function() {
  var blocks_list = ['#block--0', '#block--1', '#block--2', '#block--3'],
      index = null;
      
  var $block = $('.block');

  // Открываем первый блок
  location.href = '#block--0';
  index = 0;
  
  // Запускаем скролл блоков
  $block.scroll(function() {
    var scroll_all = this.scrollHeight,
        scroll_top = $(this).scrollTop(),
        scroll_bottom = $(this).scrollTop() + $(window).height();
    
    // ЕСЛИ ДОЛИСТАЛИ ДО НИЗУ И ЕСЛИ СЕЙЧАС ОТКРЫТ НЕ ПОСЛЕДНИЙ БЛОК
    if( scroll_bottom === scroll_all && index !== blocks_list.length - 1){
      // Добавляем + 1 к индексу
      index++;
      // Заменяем адрес
      location.href = blocks_list[index];
      // Скролим следущий блок, чтобы всё выглядело красиво
      $(blocks_list[index]).scrollTop( 50 );
    };
    
    // ЕСЛИ СКРОЛЛ ВВЕРХУ И ЕСЛИ СЕЙЧАС ОТКРЫТ НЕ ПЕРВЫЙ БЛОК
    if( scroll_top === 0 && index !== 0){
      // Вычитаем - 1 у индекса
      index--;
      // Заменяем адрес
      location.href = blocks_list[index];
      // Скролим пердидущий блок, чтобы всё выглядело красиво
      $(blocks_list[index]).scrollTop(function(e, scrollTop) {
        return scrollTop - 50;
      });
    };
  });
});
html, body {height: 100%; margin: 0}

/* Скрываем все блоки */
.block {
  display: none;
  height: 100%;
  overflow: auto;
}

/* Открываем блок соответствующий якорю */
.block:target {
  display: block;
}

/* Стилизуем контент блоков */
.block-content {
  height: 1500px;
  padding: 50px 0 0;
}

#block--0 .block-content {background-color: #ff9191}
#block--1 .block-content {background-color: #6dc36d}
#block--2 .block-content {background-color: #8686c1}
#block--3 .block-content {background-color: #e2e26e}



  
Текст 0


  
Текст 1


  
Текст 2


  
Текст 3





Саму идею вы поняли, а уже какой блок куда скролить и как стилизовать, решайте сами :)


Ответ 2

URL адресом можно управлять, если именно это вызывает вопрос:

window.history.pushState(null, null, '/#jakor1');
//в историю добавляется объект при вызове этой ф-ии - влияет на работу кнопок браузера
назад/вперёд

window.history.replaceState(null, null, '/#jakor1');
//в историю НЕ добавляется объект при вызове этой ф-ии, но заменяется текущий объект
истории


Обе ф-ии меняют урл в адресной строке. Также можно заскриптовать кнопки "Назад"/"Вперёд"
браузера, чтобы вместо загрузки страницы был ajax с анимацией - см. jQuery(window).bind('popstate',yourBackCallback);


Ответ 3

Вот вариант на "коленках" и не претендует на самый красивый код.

Проверяем какой якорь находится на экране и меняем хеш страницы. jQuery использовал
только для быстроты написания трекинга скролла.

В вашем примере есть еще подгрузка частей через AJAX запросы, но главная суть отражена.



// функция проверки присутствует ли елемент на экрана
function checkVisible(element) {
  var showThreshold = parseInt(element.offsetHeight * .7),
      elementTop = window.innerHeight - element.getBoundingClientRect().top,
      elementBottom = element.getBoundingClientRect().bottom,
      isVisible = (Math.min(elementTop, elementBottom) - showThreshold) >= 0;
  if(isVisible){
    var newHash = element.getAttribute('name');
    if(window.location.hash != '#' + newHash) {
      window.location.hash = newHash;
      console.log('change hash to - ' + newHash);
    }
  }
}

$(function(){
  var links = document.querySelectorAll('a[name]'); // получаем все элементы для
отслеживания
  $(document).on('scroll', function(){ //  трекаем скролл
    for(var i = 0; i < links.length; i++){
      checkVisible(links[i]); // проверяем отображается ли элемент на экране
    }
  });
})

Часть 1

Часть 2

Часть 3



Ответ 4

В js смотрим, докрутили ли мы страницу до самого-самого низа (или до самого-самого
верха). Если да - запускаем скрипт:
Скрипт аяксово загружает следующую (или предыдущую) страницу - главу в статье. 
Когда страница полностью загружена - скрипт меняет содержимое body на эту страницу,
а скролл перебрасывает в противоположную сторону (таким образом из конца главы №1 мы
оказываемся в начале главы №2, а из начала главы №2 - в конце главы №1).

Прокрутка к якорю с отступом сверху

#javascript #html #scroll

При клике на ссылку идет прокрутка страницы к якорю, но на странице также есть фиксированное
горизонтальное меню, и получается, что страница прокручивается слишком много.

Как сделать, чтобы прокрутка останавливалась примерно в 100 пикселях от якоря?

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



    $(document).ready(function(){
    // = Вешаем событие прокрутки к нужному месту
    	//	 на все ссылки якорь которых начинается на #
    	$('a[href^="#"]').bind('click.smoothscroll',function (e) {
    		e.preventDefault();
    
    		var target = this.hash,
    		$target = $(target);
    
    		$('html, body').stop().animate({
    			'scrollTop': $target.offset().top
    		}, 900, 'swing', function () {
    			window.location.hash = target;
    		});
    	});
    
    });






  
  
  
  


  
  

    

      
One
      
Two
      
Three
      
Four
      
Five
      
Six
    
  
  

    
One
    
Тут текст Lorem Ipsum
    
Two
    
Тут текст Lorem Ipsum.
    
Three
    
Тут текст Lorem Ipsum
    
Four
    
Тут текст Lorem Ipsum
    
Five
    
Тут текст Lorem Ipsum
    
Six
    
Тут текст Lorem Ipsum
  





    

Ответы

Ответ 1

Сделайте так $target.offset().top - 100, вместо 100 можно поставить нужное значение
в px, вот кусок вашего кода с полной функцией:
 $('html, body').stop().animate({
    'scrollTop': $target.offset().top - 100
 }, 900, 'swing', function () {
    window.location.hash = target;
 });


Ответ 2

У меня заработало c 

scrollTop': $target.offset().top - ($('#nav-container').height()+ 50)


Когда убрала строку: 

function () {window.location.hash = target;}


Ответ 3

Вам нужно $target.offset().top - (высота меню + 100).
Решение http://jsfiddle.net/gg7hg7m8/
    $('html, body').stop().animate({
        'scrollTop': $target.offset().top-($('ul').height()+ 100)  
        }, 900, 'swing', function () {
            window.location.hash = target;
    });

Регулируя значение в скобочках (100), вы будете регулировать ваш отступ.


Ответ 4

Попробуйте вот это:

$(function(){
    $('a[href*=#]').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
        && location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
            if ($target.length) {
                var targetOffset = $target.offset().top - ($("#main-header").outerHeight(true)+
20); //#main-header - заменить на ваш элемент
                $('html,body').animate({scrollTop: targetOffset}, 1000);
                return false;
            }
        }
    });
});

Горизонтальная галерея с увеличением для Android

#java #android #scroll #gallery

Подскажите, как можно сделать такую галерею картинок для Android. Пробовал HorizontalScrollView,
PagerAdapter, CoverFlowCarousel, но эффекта не добился. Необходимо, чтобы на экране
было 3 элемента. Средний должен динамически увеличиваться. После прокрутки он должен
вставать по центру экрана
    

Ответы

Ответ 1

MainActivity.class

public class MainActivity extends FragmentActivity{
static final int PAGE_COUNT = 7;

ViewPager pager;
PagerAdapter pagerAdapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    pager = (ViewPager) findViewById(R.id.pager);
    pagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
    pager.setPageTransformer(true, new ZoomOutPageTransformer());
    pager.setPageMargin(getResources().getDimensionPixelOffset(R.dimen.viewpager_margin));
    pager.setAdapter(pagerAdapter);

}
private class MyFragmentPagerAdapter extends FragmentPagerAdapter {

    public MyFragmentPagerAdapter(FragmentManager fm) {
        super(fm);
    }
    @Override
    public Fragment getItem(int position) {
        return PageFragment.newInstance(position);
    }
    @Override
    public int getCount() {
        return PAGE_COUNT;
    }
  }
}


PageFragment.class

public class PageFragment extends Fragment
{
static final String PAGE_NUMBER_POSITION = "page_number_position";
static final String RED_COLOR = "#ff0608";           //каждый
static final String ORANGE_COLOR = "#ff591c";        //охотник
static final String YELLOW_COLOR = "#ffff1e";        //желает
static final String GREEN_COLOR = "#33ff4f";         //знать
static final String LIGHT_BLUE_COLOR = "#19e9ff";    //где
static final String BLUE_COLOR = "#004cff";          //сидит
static final String PURPLE_COLOR = "#df10ff";        //фазан

int pageNumber;

static PageFragment newInstance (int page) {
    PageFragment pageFragment = new PageFragment();
    Bundle arguments = new Bundle();
    arguments.putInt(PAGE_NUMBER_POSITION, page);
    pageFragment.setArguments(arguments);
    return pageFragment;
}

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    pageNumber = getArguments().getInt(PAGE_NUMBER_POSITION);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
    View myView = inflater.inflate(R.layout.fragment1, null);
    TextView myTxt = (TextView) myView.findViewById(R.id.myTxt);
    myTxt.setAnimation(AnimationUtils.loadAnimation(getActivity(), android.R.anim.fade_in));
    if (pageNumber == 0) {myTxt.setText("Каждый");myTxt.setBackgroundColor(Color.parseColor(RED_COLOR));}
    if (pageNumber == 1) {myTxt.setText("Охотник");myTxt.setBackgroundColor(Color.parseColor(ORANGE_COLOR));}
    if (pageNumber == 2) {myTxt.setText("Желает");myTxt.setBackgroundColor(Color.parseColor(YELLOW_COLOR));}
    if (pageNumber == 3) {myTxt.setText("Знать");myTxt.setBackgroundColor(Color.parseColor(GREEN_COLOR));}
    if (pageNumber == 4) {myTxt.setText("Где");myTxt.setBackgroundColor(Color.parseColor(LIGHT_BLUE_COLOR));}
    if (pageNumber == 5) {myTxt.setText("Сидит");myTxt.setBackgroundColor(Color.parseColor(BLUE_COLOR));}
    if (pageNumber == 6) {myTxt.setText("Фазан");myTxt.setBackgroundColor(Color.parseColor(PURPLE_COLOR));}
    return myView;
  }
}


activity_main.xml








fragment1.xml







dimens.xml


16dp
16dp

-128dp
64dp



Вот такой пример: Вкратце это обычный ViewPager, где мы играем c Margin, для того
чтоб видеть "соседей". 
Остается проблема: когда мы создаем эти элементы при листинге смотрится не очень
красиво, здесь мы всё скрываем двумя анимациями. Первая - стандартная взята из guidline
google: ZoomOutPageTransformer вторая - тоже стандартная, для того чтоб элемент красиво
(и незаметно) перерисовывался: android.R.anim.fade_in
При изменении этих анимций на кастомные можно получить интересные эффекты, но не
забудьте поставить соответствующие отступы в dimens.xml и enjoy)

Проверить наличие скролла на JS

#javascript #scroll

Подскажите, пожалуйста, как проверить, есть ли на странице скролл или нет?    

Ответы

Ответ 1

если document.scrollHeight равен document.offsetHeight то скрола нет


Ответ 2

Можно такую штуку проверить на jQuery 
$(document).ready(function(){
    $('#object').scroll(function(){
        alert('Был осуществлен Scroll');
    });
});


Ответ 3

просто и кроссбрузерно
if(-[1,]){
    if (document.body.offsetHeight > window.innerHeight) {
        alert("Скролл есть");
    } else {
        alert("Скролла нет");
    }

} else {
    if (document.body.offsetHeight > document.documentElement.clientHeight) {
        alert("Скролл есть");
    else {
        alert("Скролла нет");
    }
}


Ответ 4

function get_scroll(a) {
  var d = document,
      b = d.body,
      e = d.documentElement,
      c = "client" + a;
      a = "scroll" + a;
  return /CSS/.test(d.compatMode)? (e[c]< e[a]) : (b[c]< b[a])
};


Использование:


get_scroll('Width') – есть ли горизонтальный скролл
get_scroll('Height') – есть ли вертикальный скролл

Плавная прокрутка страницы без jQuery

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

Ответ

var get = function(obj) { return document.getElementById(obj) }; get('scrollbox').onwheel = function(e) { var delta = e.deltaY; delta = (delta > 0) ? 30 : -30; get('scrollbox').style.top = delta + get('scrollbox').offsetTop + 'px'; e.preventDefault(); } get('scroll').onclick = function() { get('scrollbox').style.top = -30 + get('scrollbox').offsetTop + 'px'; } #block { width: 300px; height: 300px; background-color: #dddddd; position: absolute; padding: 5px; } #scrolling { width: 100%; overflow: hidden; height: 100%; } #scrollbox { position: relative; transition: 0.2s; } #scroll { right: 0%; top: 0%; position: absolute; width: 100px; height: 25px; background-color: white; }

la
ga
ha
aa
lj
va
ja
la
va
aa
lm
la
ga
ha
aa
lj
va
ja
la
va
aa
lm
la
ga
ha
aa
lj
va
ja
la
va
aa
lm
la
ga
ha
aa
lj
va
ja
la
va
aa
lm
la
ga
ha
aa
lj

прокрутить

Замедлить прокрутку определённого блока на величину коэффициента

Есть центральный блок контента и есть правый сайдбар. Необходимо замедлить прокрутку правого сайдбара на величину разницы их высот. Прокрутка обоих блоков должна заканчиваться в одном и том же месте, "приходить к финишу" одновременно
$(document).ready(function(){ var content_height = $('.content').height(); // получаем высоту контента var sidebar_height = $('.sidebar').height(); // получаем высоту сайдбара var slow_ratio = Math.round(parseInt(content_height)/parseInt(sidebar_height)); //рассчитываем коэффициент замедления
if(slow_ratio > 1){ // если разница больше 1, то нужно замедлить прокрутку $('.sidebar') в slow_ratio раз, то есть оба блока должны "приходить к финишу" одновременно, так сказать } });

Ответ

Используй data-scroll-speed в нужном блоке. Соотношение высот блоков сам подсчитай.
Пример:
$.fn.moveIt = function(){ var $window = $(window); var instances = []; $(this).each(function(){ instances.push(new moveItItem($(this))); }); window.onscroll = function(){ var scrollTop = $window.scrollTop(); instances.forEach(function(inst){ inst.update(scrollTop); }); } } var moveItItem = function(el){ this.el = $(el); this.speed = parseInt(this.el.attr('data-scroll-speed')); }; moveItItem.prototype.update = function(scrollTop){ var pos = scrollTop / this.speed; this.el.css('transform', 'translateY(' + -pos + 'px)'); }; $(function(){ $('[data-scroll-speed]').moveIt(); }); .content { height: 3000px; } .wrapper { position: fixed; } .wrapper .box { width: 100px; height: 100px; line-height: 100px; text-align: center; font-size: 160%; color: #fff; position: absolute; background: #ff8330; } .wrapper .box:nth-of-type(2) { left: 100px; background: #E01B5D; } .wrapper .box:nth-of-type(3) { left: 200px; background: #30FFFF; } .wrapper .box:nth-of-type(4) { left: 300px; background: #B3FF30; } .wrapper .box:nth-of-type(5) { left: 400px; background: #308AFF; } .wrapper .box:nth-of-type(6) { left: 500px; background: #1BE059; }

S

C

R

O

L

L

Пример добавления атрибута средствами javascript
document.getElementsByID("your-block").setAttribute("data-scroll-speed", "your-value");

scrollIntoView съедает следующий клик

Есть кастомный дропдаун (вообще на реакте, но это не важно).
Когда input получает фокус, отображается выпадающий блок и делается подписка на capturing-стадию клика по документу. В этом обработчике проверяется, клик произошёл внутри области, или вне. Если вне, то дропдаун закрывается, а обработчик снимается.
Так всё работает. Проблема возникает при добавлении в код inp.scrollIntoView() или ручном изменении scrollTop контейнера: если следующий клик происходит по аналогичному интупу, то обработчик клика вообще не вызывается.

Функции вызываются как-то так:
focus #1 #1 focus #2 #2 click #1 close #1 click #2 close #2
https://jsfiddle.net/2qb5L7og/1/
for (let inp of document.querySelectorAll("input")) { inp.addEventListener('focus', e => { console.log("focus", e.target.value, inp.value) var dd = inp.nextElementSibling dd.style.display = 'block' inp.scrollIntoView() document.addEventListener('click', function close(e) { console.log("click", inp.value) if (e.target.closest("section") !== inp.parentElement) { console.log("close", inp.value) dd.style.display = '' document.removeEventListener('click', close, true) } }, true) }) } * { box-sizing: border-box; } main { border: 1px solid red; height: 11.4em; overflow: auto; } section { position: relative; margin: 1em 1em 7em 1em; border: 1px solid blue; background: #8FF; } input { cursor: pointer; display: block; width: 100%; } div { position: absolute; top: 100%; left: -1px; right: -1px; display: none; border: 1px solid green; border-top: 0; }

In #1
In #1
In #1
In #1

In #2
In #2
In #2
In #2

In #3
In #3
In #3
In #3

In #4
In #4
In #4
In #4

In #5
In #5
In #5
In #5

Ответ

Похоже из-за того, что в момент клика двигается контент, отпуск клавиши мышки происходит в другом месте, что браузером не интерпретируется, как событие click
Я вижу два решения:
Поставить задержку прокрутки. Использовать событие mousedown
Пример с событием mousedown
for (let inp of document.querySelectorAll("input")) { inp.addEventListener('focus', e => { console.log("focus", e.target.value, inp.value) var dd = inp.nextElementSibling dd.style.display = 'block' inp.scrollIntoView() document.addEventListener('mousedown', function close(e) { console.log("click", inp.value) if (e.target.closest("section") !== inp.parentElement) { console.log("close", inp.value) dd.style.display = '' document.removeEventListener('mousedown', close, true) } }, true) }) } * { box-sizing: border-box; } main { border: 1px solid red; height: 11.4em; overflow: auto; } section { position: relative; margin: 1em 1em 7em 1em; border: 1px solid blue; background: #8FF; } input { cursor: pointer; display: block; width: 100%; } div { position: absolute; top: 100%; left: -1px; right: -1px; display: none; border: 1px solid green; border-top: 0; }

In #1
In #1
In #1
In #1

In #2
In #2
In #2
In #2

In #3
In #3
In #3
In #3

In #4
In #4
In #4
In #4

In #5
In #5
In #5
In #5

Кроссбраузерно определять конец страницы

Есть такого рода код:
$(window).scroll(function(){ if ($(window).scrollTop() == $(document).height() - $(window).height()) alert('Привет'); });
Прекрасно работает на десктопе. Но почему-то не работает в мобильной версии. Из мобилок у меня только iPhone 5C, так что девайсов на тест не велико, но и в режиме имитатции мобилок в Хроме, код тоже не хочет выполняться. Есть неколхозный и без костылей вариант кросбраузерно отслеживать конец страницы по скроллу?

Ответ

Попробуйте такой вариант с использованием кросс-браузерной функции определения высоты документа от James Padolsey
function getDocHeight() { var D = document; return Math.max( D.body.scrollHeight, D.documentElement.scrollHeight, D.body.offsetHeight, D.documentElement.offsetHeight, D.body.clientHeight, D.documentElement.clientHeight ); } $(document).ready(function() { $(window).scroll(function() { if ($(window).scrollTop() + $(window).height() == getDocHeight()) { alert("Конец страницы"); } }); }); #container { height: 1000px; width: 100px; background-color: red; }

Горизонтальный скроллинг на мобильных экранах

Нужно сделать горизонтальный скроллинг одного блока на мобильных экранах, а именно, чтобы появлялась стрелка вправо, и влево, если контент будет и слева. Какие есть методы решения? Прикрепляю скрин, как должно это выглядеть

Ответ

Честное слово, мне очень стыдно за этот код, писал буквально на коленке =\ Может поможет или хотя бы натолкнет на мысль:
var button_left = $("#button-left"); var button_right = $("#button-right"); button_right.on("click", function(){ var box = $('.container'); var content = $('.content'); var box_width = box.width(); var content_width = content.width(); var max_scroll = content_width - box_width; var cur_scroll = Math.abs(parseInt( content.css('left') )); if( cur_scroll + 30 < max_scroll ) { content.css('left', '-' + (cur_scroll + 30) + 'px'); } else { content.css('left', '-' + (max_scroll) + 'px'); } }); button_left.on("click", function(){ var box = $('.container'); var content = $('.content'); var box_width = box.width(); var content_width = content.width(); var cur_scroll = Math.abs(parseInt( content.css('left') )); if( cur_scroll - 30 >= 0 ) { content.css('left', '-' + (cur_scroll - 30) + 'px'); } else { content.css('left', '0px'); } }); .container { height: 200px; overflow: hidden; position: relative; width: 100%; } .content{ height: 200px; left: 0; position: absolute; top: 0; width: 200%; z-index: 1; TRANSITION: .2S; } .button { CURSOR: POINTER; background: #0084ff; border: none; border-radius: 50%; padding: 8px 14px; font-size: 15px; color: #fff; height: 50px; position: absolute; top: 50%; width: 50px; z-index: 2; } .button-left { left: 0px; } .button-right { right: 0px; }

left

фдвофвдовдафовжф ы вдофыв жфоыв фывоа фывжаофыва фвы фыжваофывэафоывафыво фываофыважфывоафжывофывжа офывафэыва офывжа фыжв офвыаж фыовафжы ваофывжа фывоаф ыжвдаофы вжадфоы вафжыдва офывжадо

right

Андроид. Управление scrollVIew

В общем проблема такая: внутри скрол вьюва лежит imageView с определёным обработчиком касаний. И один из жестов - движение пальцем снизу вверх. Но вместо этого жест перехватывает скроллер и экран прокручивается. Как сделать так, чтобы при проведении пальцем именно по этой картинке работал обработчик вместо скрола?

Ответ

Я НАШЁЛ РЕШЕНИЕ!!! В общем поэксперементировал с разными методами. Простым языком. Нужно создать свой класс, расширяющий ScrollView, и переопределить в нём метод onInterceptTouchEvent, написав ему всего одну единую строчку "return false". И всё =)