使用鼠標懸停從左向右和從右向左滾動
[英]Scroll left to right and right to left using mouse over
問題描述
我嘗試使用 jQuery (jquery-1.7.1.min.js) 在mouseover滾動，但無法滾動。 下面是我的代碼。
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 和 right 需要從左到右和從左到右滾動文本，但它不能使用 jQuery。
1 個解決方案
解決方案1
2 已采納 2020-03-20 08:09:42
您的代碼中幾乎沒有問題：
-
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>
如何通過鼠標滾動按鈕左右滾動
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.