Прокрутите вниз, используя Jquery - при наведении - PullRequest
Новая
       3

Прокрутите вниз, используя Jquery - при наведении

0 голосов
/ 11 октября 2019

Цель: При наведении - прокрутить вниз в пределах деления. Когда зависание прекратится - остановите прокрутку в пределах div. Это то, что я пробовал. Это работает, за исключением того, что оно наводит курсор вниз на 150 пикселей каждый раз, когда мышь наводит курсор на # down1. Так что это не непрерывно. Есть идеи? 

hovered = false;

$("#down1").on({
  mouseenter: function() {
    hover = true;
    if (hover = true) {
      var y = $('#avoidOptions').scrollTop(); //your current y position on the page
      $('#avoidOptions').scrollTop(y + 150);
    }
  },
  mouseleave: function() {
    hover = false;
  }
});
.scrollingOptions {
  height: 30vh;
  width: 100%;
  overflow: auto;
  z-index: 1000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='scrollingOptions' id='avoidOptions'>
  <p class='likeavoid avoid1'>1
  </p>
  <p class='likeavoid avoid2'>2
  </p>
  <p class='likeavoid avoid3'>3
  </p>
  <p class='likeavoid avoid4'>4
  </p>
  <p class='likeavoid avoid5'>5
  </p>
  <p class='likeavoid avoid6'>6
  </p>
  <p class='likeavoid avoid7'>7
  </p>
  <p class='likeavoid avoid8'>8
  </p>
  <p class='likeavoid avoid9'>9
  </p>
  <p class='likeavoid avoid10'>10
  </p>
  <p class='likeavoid avoid11'>11
  </p>
  <br>
</div>
<p class='white text-center' id='down1'> Scroll Down - Hover Here</p>

Ответы [ 4 ]

2 голосов
/ 12 октября 2019

Вопрос специфический:

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

У вас есть if (hover = true) {, который должен быть if (hover === true) {, или, поскольку это логическое значение, просто используйте это if (hover) {, хотя я не вижу причины для его использования здесь.

Примечание«this» здесь this.intervalId - это элемент с #down1, но он работает здесь, так как он есть в обоих обработчиках событий, возможно, было бы лучше использовать пространство имен, например var myApp ={intervalId:null,scrollElement:function(scrollTarget, scrollBy) {}};, на которое ссылаются как myApp.intervalId, и вызываемую функцию(а не глобальный, например var intervalId;)

Необязательно:

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

Замечания:

  • Я не фанат <br />, просто чтобы добавить пробел, поэтому я удалил его и добавил отступ ввместо родительского
  • Вместо <p></p> рассмотрим <div> с полем или отступом для пробелов
  • Я заметил, что у вас есть куча нумерованных классов. Если вы нацелены на них по какой-то причине, хорошо, но вместо этого вы также можете определить индекс элемента, например, jQuery имеет индекс на основе 0, например $('.likeavoid').index(); или если вы знаете значение индекса $('.likeavoid').eq(5); для целевого
  • Я добавил пример хранения значения интервала в разметке элемента, если вы расширите его на все значения, то сможете использовать одни и те же события для нескольких групп элементов.
  • Вы также можете сгладитьпрокрутка по ссылке: Плавная прокрутка при нажатии на ссылку привязки 

function scrollElement(scrollTarget, scrollBy) {
  scrollTarget.scrollTop(scrollTarget.scrollTop() + scrollBy);
}
$("#down1").on({
  mouseenter: function(event) {
    // these could also be stored on event.target like I did for the interval
    let scrollAmount = 150; //amount could be stored
    let scrollTarget = $('#avoidOptions'); //id could be stored
    let timeInterval = $(event.target).data("scroll-interval");
    this.intervalId = window.setInterval(scrollElement, timeInterval, scrollTarget, scrollAmount);
  },
  mouseleave: function(event) {
    window.clearInterval(this.intervalId);
  }
});
.scrollingOptions {
  height: 30vh;
  width: 100%;
  overflow: auto;
  z-index: 1000;
  padding-bottom: 1em;
}

.scroller {
  border: solid 1px #EEEEEE;
  background-color: #eeffff;
  margin-top: 1em;
}

.likeavoid {
  border: dashed 1px #EEEEEE;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='scrollingOptions' id='avoidOptions'>
  <p class='likeavoid avoid1'>1</p>
  <p class='likeavoid avoid2'>2</p>
  <p class='likeavoid avoid3'>3</p>
  <p class='likeavoid avoid4'>4</p>
  <p class='likeavoid avoid5'>5</p>
  <p class='likeavoid avoid6'>6</p>
  <p class='likeavoid avoid7'>7</p>
  <p class='likeavoid avoid8'>8</p>
  <p class='likeavoid avoid9'>9</p>
  <p class='likeavoid avoid10'>10</p>
  <p class='likeavoid avoid11'>11</p>
</div>
<div class='scroller white text-center' id='down1' data-scroll-interval="1000"> Scroll Down - Hover Here</div>

UNTESTED на мобильном устройстве: опция комментария реагирует на мобильное устройство согласно спецификации. ссылка https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent

function scrollElement(scrollTarget, scrollBy) {
  scrollTarget.scrollTop(scrollTarget.scrollTop() + scrollBy);
}

function enterHandler(event) {
  // these could also be stored on event.target like I did for the interval
  let scrollAmount = 150; //amount could be stored
  let scrollTarget = $('#avoidOptions'); //id could be stored
  let timeInterval = $(event.target).data("scroll-interval");
  this.intervalId = window.setInterval(scrollElement, timeInterval, scrollTarget, scrollAmount);
  event.preventDefault();
}

function leaveHandler(event) {
  window.clearInterval(this.intervalId);
  event.preventDefault();
}
$("#down1")
  .on('touchstart', enterHandler).on('touchend', leaveHandler)
  .on('mouseenter', enterHandler).on('mouseleave', leaveHandler);
.scrollingOptions {
  height: 30vh;
  width: 100%;
  overflow: auto;
  z-index: 1000;
  padding-bottom: 1em;
}

.scroller {
  border: solid 1px #EEEEEE;
  background-color: #eeffff;
  margin-top: 1em;
}

.likeavoid {
  border: dashed 1px #EEEEEE;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='scrollingOptions' id='avoidOptions'>
  <p class='likeavoid avoid1'>1</p>
  <p class='likeavoid avoid2'>2</p>
  <p class='likeavoid avoid3'>3</p>
  <p class='likeavoid avoid4'>4</p>
  <p class='likeavoid avoid5'>5</p>
  <p class='likeavoid avoid6'>6</p>
  <p class='likeavoid avoid7'>7</p>
  <p class='likeavoid avoid8'>8</p>
  <p class='likeavoid avoid9'>9</p>
  <p class='likeavoid avoid10'>10</p>
  <p class='likeavoid avoid11'>11</p>
</div>
<div class='scroller white text-center' id='down1' data-scroll-interval="1000"> Scroll Down - Hover Here</div>
2 голосов
/ 12 октября 2019

У меня работал интервальный таймер: 

$("#down1").on({
  mouseenter: function() {
    this.timer = setInterval(function() {
        var y = $('#avoidOptions').scrollTop();  //your current y position on the page
        $('#avoidOptions').scrollTop(y + 150);
    }, 500);
  },
  mouseleave: function() {
    clearInterval(this.timer);
  }
});

setInterval запускает таймер, а функция запускается через 500 мс, а затем повторяется. Останавливается с clearInterval. Кроме того, нет необходимости проверять, является ли hover истинным сразу после установки его в true. Я удалил эту часть.

Демо: https://jsfiddle.net/4vco2arg/

$("#down1").on({
  mouseenter: function() {
    this.timer = setInterval(function() {
      var y = $('#avoidOptions').scrollTop(); //your current y position on the page
      $('#avoidOptions').scrollTop(y + 150);
    }, 500);
  },
  mouseleave: function() {
    clearInterval(this.timer);
  }
});
.scrollingOptions {
  height: 30vh;
  width: 100%;
  overflow: auto;
  z-index: 1000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='scrollingOptions' id='avoidOptions'>
  <p class='likeavoid avoid1'>1
  </p>
  <p class='likeavoid avoid2'>2
  </p>
  <p class='likeavoid avoid3'>3
  </p>
  <p class='likeavoid avoid4'>4
  </p>
  <p class='likeavoid avoid5'>5
  </p>
  <p class='likeavoid avoid6'>6
  </p>
  <p class='likeavoid avoid7'>7
  </p>
  <p class='likeavoid avoid8'>8
  </p>
  <p class='likeavoid avoid9'>9
  </p>
  <p class='likeavoid avoid10'>10
  </p>
  <p class='likeavoid avoid11'>11
  </p>
  <br>
</div>
<p class='white text-center' id='down1'> Scroll Down - Hover Here</p>
1 голос
/ 11 октября 2019

В setInterval (функция, время) вы можете выбрать время, исходя из того, насколько плавно вы хотите прокрутить. Здесь я использовал 100. Если вы не используете переменную hover где-либо еще в вашем коде, вы можете удалить ее. потому что это не играет никакой роли в прокрутке вниз. 

var hover = false;
var scrollInterval = null;

$("#down1").on({
mouseenter: function () {

    hover = true;

    scrollInterval = setInterval(function (){
        var y = $('#avoidOptions').scrollTop();  //your current y position on the page
        $('#avoidOptions').scrollTop(y + 150)
    }, 100);


},
mouseleave: function () {
    hover = false;
    clearInterval(scrollInterval)
    }
});
0 голосов
/ 11 октября 2019

Вы, вероятно, можете сделать это с помощью таймера с коротким интервалом 

window.setInterval(function(){
  /// call your function here
}, 500);

Чтобы остановить таймер, вы можете использовать

clearInterval()

Это должно выглядеть примерно так

var scroll;

$("#down1").on({
  mouseenter: function() {
      scroll = window.setInterval(function() {
          var y = $('#avoidOptions').scrollTop();
          $('#avoidOptions').scrollTop(y + 150);
      }, 500);
    }
  },
  mouseleave: function() {
    clearInterval(scroll);
  }
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...