滚动按钮在 jQuery 中不起作用

Scroll buttons not working in jQuery

本文关键字：不起作用 jQuery 按钮 滚动      更新时间：2023-09-26

我正在开发这样的时间轴应用程序。

为此，我创建了两个按钮来左右滚动。我在jQuery中编写了这段代码，但它不起作用。

这是我的代码：

<script>
        var ctx=document.getElementById('myCanvas').getContext('2d');       
        var years=1,hline =5;
    ctx.strokeStyle = "#7A7A52";    
    ctx.lineWidth = 1;
//Scale
ctx.fillStyle="white";
ctx.fillRect(0,150,1350,50);
var startYr=1890;
    do{
        ctx.beginPath();
        ctx.moveTo(hline,150);
        ctx.lineTo(hline,173);
        ctx.stroke();
            ctx.font = "12px Arial";
            ctx.fillStyle="#7A7A52";    
            ctx.fillText (startYr, hline-15, 190);  
        for (var i=0;i<10;i++)
        {
            ctx.moveTo(hline,150);
            ctx.lineTo(hline,160);
            ctx.stroke();
            hline = hline + 6;
        }
        years = years+10;
        startYr = startYr +10;
 }while(years<=1000);
//ScaleEnd
var i=0;
 $(".right").click(function(){
  $("#myCanvas").scrollLeft(i+=100);    
  });
 $(".left").click(function(){
  $("#myCanvas").scrollLeft(i-=100);    
  });

我的CSS代码是：

#myCanvas
    {
        background-color: #C2C2BB;
        margin-left: 180px;
        overflow: hidden;
    }

但是 .right 和 .left 按钮无法滚动。请告诉我我做错了！

首先查看你的javascript控制台是否有错误。如果没有任何错误，那没关系。其次，您可以将您的代码发布在网络上的某个地方，我们可以对其进行测试。这将有助于我们回答您的问题。第三，正如我所看到的，你已经发布了一个javascript代码，但是，你还没有用</script>标签关闭它。而最重要的部分：在我看来，你做错了，你不应该在画布元素上回显你的所有应用程序，尝试使用单独的div，比如时间线.js。这会更容易和更好。尝试制作一个固定宽度的主div，将溢出设置为无，并在该主div 上放置一些额外的div。例如：

<div id='timeline'> 
  <div id='first-event'></div>
  <div id='second-event'></div>
</div>

然后使用 jQuery 函数 scrollTo，用箭头滚动浏览主div。

相关文章：