CSS 时间轴滚动条禁用导航

CSS Timeline scroller disable navigation

本文关键字：导航 滚动条 时间 CSS      更新时间：2023-09-26

尊敬的人...

我正在研究一个时间线滚动器，当我向左滚动时给我带来了问题......

当元素数量不再存在时，我需要禁用导航......

我使用绑定和解绑相同的：

$("#right,#left").click ->
  #alert page_no
  if page_no >= (size-1)
    $("#right").unbind("click")
  else
    #alert "activating right"
    $("#right").bind("click")
  if page_no > 3
    $("#left").unbind("click")
  else
    #alert "activating left"
    $("#left").bind("click")

但是左侧导航不起作用。

基本上，右侧导航在显示第 15 个元素后应该被禁用，而左侧导航应该在溢出第一个元素之前被禁用......

这是我目前的状态：http://codepen.io/akashdevaraju/pen/vikar

我已经检查了很多次js，但无法弄清楚...

PS：我以前的代码带有工作导航但没有残疾功能http://codepen.io/akashdevaraju/pen/tiesa

编辑：添加了JS版本

通过删除取消绑定并将页面检查移动到 if 右/左块来修复它：

  $("#right,#left").click ->
    #alert page_no
    id = this.id
    patt = /-?'d+/g
    circles = $(".circle")    
    if id is "right"  
      if page_no >= (size-1) #moved first if statement here
         return
      page_no = page_no + 1
      for cir in circles
        left = $(cir).css("left")
        lef = parseInt(left.match(patt))          
        le = lef - 80            
        $(cir).css("left","#{le}px")
    else      
      if page_no <= 3 #moved second if statement here
         return
      page_no = page_no - 1 
      #alert page_no
      for cir in circles        
        left = $(cir).css("left")        
        lef = Number(left.match(patt))        
        le = lef + 80
        $(cir).css("left","#{le}px")

http://codepen.io/anon/pen/Hhazm

正在发生的事情是unbind('click'(也取消了父函数的绑定，因此没有发生任何页码检查。通过使用 return，单击仍处于绑定状态，但页面检查仍会发生。

if语句需要调整，最多可以打印15页。

你需要为 .bind(( 定义一个行为，对吧？你不能只说"绑定"——你实际上并没有将任何东西绑定到选择器。

$('#left-arrow').bind('click', function(event) {
    // click handling code goes here
});
相关文章：