stackoom
  简体   繁体   中英

Scroll left to right and right to left using mouse over

 原文  2020-03-20 07:26:15  6   1    javascript/ jquery/ html

Question

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.

1 answers

solution1
 2 ACCPTED  2020-03-20 08:09:42

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> , eg 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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to scroll right and left by mouse scroll button Auto scroll left to right based on mouse selection Scroll div right to left Scroll vertical-rl div from right to left using mouse scroll Iterate over Array on mouse move left or right over a div scroll a div to the left/right using jQuery Animate jQuery left and right button scroll Single scroll (left and right) website Animate image left to right on scroll Scroll left / right an image with animation
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM