Прокрутка слева направо и справа налево с помощью мыши - PullRequest
Новая
       1

Прокрутка слева направо и справа налево с помощью мыши

2 голосов
/ 20 марта 2020

Я попытался прокрутить mouseover, используя jQuery (jquery -1.7.1.min. js), но не смог прокрутить. ниже мой код. 

var ele = $('html,body');
var speed = 1,
  scroll = 3,
  scrolling;

$('#up').mouseenter(function() {
  //scroll the element up
  scrolling = window.setInterval(function() {
    ele.scrollTop(ele.scrollTop() - scroll);
  }, speed);
});

$('#down').mouseenter(function() {
  //scroll the element down
  scrolling = window.setInterval(function() {
    ele.scrollTop(ele.scrollTop() + scroll);
  }, speed);
});

$('#up, #down').bind({
  click: function(e) {
    //stop scrolling
    if (scrolling) {
      //prevents the default click action
      e.preventDefault();
    }
  },
  mouseleave: function() {
    if (scrolling) {
      window.clearInterval(scrolling);
      scrolling = false;
    }
  }
});
.control {
  width: 100%;
  position: fixed;
  text-align: center
}

#up.control {
  position: fixed;
  top: 0
}

#down.control {
  position: fixed;
  top: 20
}


/* no needed: */

#scroll {
  overflow-x: scroll;
  width: 500px;
  white-space: nowrap;
  overflow: hidden!imprtant;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="scroll">
  Content here and more content here Content here and more content here Content here and more content here Content here and more content here Content here and more content here Content here and more content here Content here and more content here Content
  here and more content here Content here and more content here Content here and more content here Content here and more content here Content here and more content here Content here and more content here Content here and more content here Content here
  and more content here Content here and more content here Content here and more content here Content here and more content here Content here and more content here Content here and more content here Content here and more content here Content here and
  more content here Content here and more content here Content here and more content here Content here and more content here Content here and more content here Content here and more content here Content here and more content here Content here and more
  content here Content here and more content here Content here and more content here Content here and more content here Content here and more content here Content here and more content here Content here and more content here Content here and more content
  here
</div>

<a href="#" id="up" class="control">left</a>
<a href="#" id="down" class="control">right</a>

onmouse слева и справа необходимо прокрутить текст слева направо и слева направо, но это не работает с помощью jQuery.

1 Ответ

2 голосов
/ 20 марта 2020

Существует небольшая проблема в вашем коде:

  • ele = $('html,body'); должен быть элементом, который вы собираетесь прокручивать, а не документом <body> или <html>, например, в вашем случае это <div id="scroll">...
  • вы должны использовать .scrollLeft () , а не scrollTop(), поскольку вы прокручиваете влево и вправо, а не вверх, вниз.

Я считаю, это то, что вы хотите 

var ele = $('#scroll');
var speed = 10,
  scroll = 3,
  scrolling;
 

$('#up').mouseenter(function() {
  //scroll the element up
  scrolling = window.setInterval(function() {
    scroll += 0.5;
    ele.scrollLeft(ele.scrollLeft() - scroll);
  }, speed);
  
}).mouseleave(function(){
  window.clearInterval(scrolling);
  scroll = 3;
})

$('#down').mouseenter(function() {
  //scroll the element down
  scrolling = window.setInterval(function() {
    scroll += 0.5;
    ele.scrollLeft(ele.scrollLeft() + scroll);
  }, speed);
})
.mouseleave(function(){
  window.clearInterval(scrolling);
  scroll = 3;
})
.control {
  width: 100%;
  position: fixed;
  text-align: center
}

#up.control {
  position: fixed;
  top: 0
}

#down.control {
  position: fixed;
  top: 20
}


/* no needed: */

#scroll {
  overflow-x: scroll;
  width: 500px;
  white-space: nowrap;
  overflow: hidden!imprtant;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="scroll">
  Content here and more content here Content here and more content here Content here and more content here Content here and more content here Content here and more content here Content here and more content here Content here and more content here Content
  here and more content here Content here and more content here Content here and more content here Content here and more content here Content here and more content here Content here and more content here Content here and more content here Content here
  and more content here Content here and more content here Content here and more content here Content here and more content here Content here and more content here Content here and more content here Content here and more content here Content here and
  more content here Content here and more content here Content here and more content here Content here and more content here Content here and more content here Content here and more content here Content here and more content here Content here and more
  content here Content here and more content here Content here and more content here Content here and more content here Content here and more content here Content here and more content here Content here and more content here Content here and more content
  here
</div>

<a href="#" id="up" class="control">left</a>
<a href="#" id="down" class="control">right</a>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...