Wed. Sep 27th, 2023

[ANSWERED] javascript – Scroll left to right and right to left using mouse over

By

Nov 19, 2022 html, javascript, jquery

Solution 1 :

There is few issue in your code:

ele = $('html,body'); should be the element that you intends to scroll, not the document <body> or <html>, e.g in your case is <div id="scroll">...
you have to use .scrollLeft() not scrollTop() since you are scrolling left and right, not top, down.

I believe this is what you want

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>

Problem :

I tried to scroll on mouseover using jQuery (jquery-1.7.1.min.js) but unable to scroll. below is my code.

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 over on left and right need to scroll text from left to right and left to right but It’s not working using jQuery.

By

Related Post

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

Nov 20, 2022

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

Nov 20, 2022

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

Nov 20, 2022