使用鼠标悬停从左向右和从右向左滚动

Question

I tried to scroll on mouseover using jQuery (jquery-1.7.1.min.js) but unable to scroll.我尝试使用 jQuery (jquery-1.7.1.min.js) 在mouseover滚动，但无法滚动。 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. onmouse over on left 和 right 需要从左到右和从左到右滚动文本，但它不能使用 jQuery。

Answer 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> , eg in your case is <div id="scroll">...应该是您打算滚动的元素，而不是文档<body>或<html> ，例如在您的情况下是<div id="scroll">...
you have to use .scrollLeft() not scrollTop() since you are scrolling left and right, not top, down.你必须使用.scrollLeft()而不是scrollTop()因为你是左右滚动，而不是上下滚动。

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>

使用鼠标悬停从左向右和从右向左滚动

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-03-20 08:09:42

使用鼠标悬停从左向右和从右向左滚动

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-03-20 08:09:42

解决方案1
2 已采纳 2020-03-20 08:09:42