Коснитесь прокрутки содержимого внутри <div>снаружи - PullRequest
Новая
       2

Коснитесь прокрутки содержимого внутри <div>снаружи

0 голосов
/ 20 сентября 2019

(Пожалуйста, смотрите изображение в конце) У меня есть text <div> на моем сайте, но это не полная ширина.<body> моего документа не прокручивается.Мне просто нужно это text <div> для прокрутки, когда пользователь использует колесо прокрутки мыши для прокрутки, но указатель мыши не на моем text <div>.Я нашел некоторый код jQuery для этой цели.Я запускаю это <script> на document.onload:

Учитывая, что class моего text <div> равно .scroll, работает следующий код: 

var target = $('.scroll').get(0);
$('body').on('wheel', function (e)
    {
        var o = e.originalEvent;
        target.scrollTop += o.deltaY;
        target.scrollLeft += o.deltaX;
    });

Итак, моя проблемаМне нужно добавить такую ​​же функциональность для телефонов или в основном сенсорных устройств.Даже если пользователи касаются моего text <div> и прокручивают его, text <div> следует прокручивать.Я пытался сделать это в том же теге <script>, но ничего не получалось: 

$('body').on('touchmove', function(e)
    { 
        var o2 = e.originalEvent;
        target.scrollTop += o2.deltaY;
        target.scrollLeft += o2.deltaX;
    });

Я также пытался изменить его .on('tou... на .bind('tou..., оба не работали.Консоль тоже пуста.Однако, если я добавлю console.log('touched'); в приведенном выше коде (перед закрытием });, консоль отобразит в нем touched. Таким образом, он может работать, однако прокрутка не работает.

Может кто-нибудь подсказать мне, как заставить эту штуку работать на сенсорных экранах? Я открыт и для других подходов на основе JavaScript.

Изображение:

enter image description here

Ответы [ 3 ]

0 голосов
/ 20 сентября 2019

Этот код может быть полезен .. 

$(window).on('touchstart', function(event){
    var currentScrl = event.originalEvent.changedTouches[0].clientY;
    var winTop = $(this).scrollTop();
    $(this).on('touchmove', function(event) {
        var scrolling = (event.originalEvent.changedTouches[0].clientY - currentScrl)*-1;
        $(this).scrollTop(winTop + scrolling);
    });
});
$(window).on('touchend', function(){
    $(window).off('mousemove');
});
0 голосов
/ 21 сентября 2019

Вот что у меня наконец получилось (это весь код, прокрутка мышью + сенсорная прокрутка): 

var target = $('.scroll').get(0);
$('body').on('wheel', function (e)
    {
        var o = e.originalEvent;
        target.scrollTop += o.deltaY;
    });
var lastTouch = null;
window.addEventListener('touchstart', function (event)
    {
        lastTouch = event.touches[0];
    })
window.addEventListener('touchend', function (event)
    {
        lastTouch = null;
    })
window.addEventListener('touchmove', function (event)
    {
        var currentTouch = event.changedTouches[0];
        if (lastTouch)
            {
                target.scrollTop += lastTouch.clientY - currentTouch.clientY;
            }
        lastTouch = currentTouch;
    });
0 голосов
/ 20 сентября 2019

Это решение с использованием jquery 

const $parent = $('.parent')

$parent.on('wheel', function(e) {
  if (e.originalEvent.wheelDelta / 120 > 0) {
    $parent.animate({
      scrollTop: 0
    })
  } else {
    $parent.animate({
      scrollTop: $parent.prop('scrollHeight')
    })
  }
})
.parent {
  height: 160px;
  overflow: auto;
  background: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <h1>first</h1>
  <h1>second</h1>
  <h1>third</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>last</h1>
</div>

Это решение с использованием чистого JavaScript 

const $parent = document.querySelector('.parent')

$parent.addEventListener('wheel', function(e) {
  if (e.deltaY > 0) {
    $parent.scrollTo(0, $parent.scrollHeight)
  } else {
    $parent.scrollTo(0, 0)
  }
})
.parent {
  height: 160px;
  overflow: auto;
  background: pink;
}
<div class="parent">
  <h1>first</h1>
  <h1>second</h1>
  <h1>third</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>content</h1>
  <h1>last</h1>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...