Javascript 基于水平滚动的隐藏箭头

我正在努力对这个水平滚动代码进行微小的更改：

我想在您一直滚动到右侧时，使右侧按钮消失（就像原始代码中的左侧按钮一样）

应该有一个快速简单的解决方案，但我还没有找到。请帮助我，提前谢谢你

     $(function() {
       var print = function(msg) {
         alert(msg);
       };

       var setInvisible = function(elem) {
         elem.css('visibility', 'hidden');
       };
       var setVisible = function(elem) {
         elem.css('visibility', 'visible');
       };

       var elem = $("#elem");
       var items = elem.children();

       // Inserting Buttons
       elem.prepend('<div id="right-button" style="visibility: hidden;"><a href="#"><</a></div>');
       elem.append('  <div id="left-button"><a href="#">></a></div>');

       // Inserting Inner
       items.wrapAll('<div id="inner" />');

       // Inserting Outer
       debugger;
       elem.find('#inner').wrap('<div id="outer"/>');

       var outer = $('#outer');

       var updateUI = function() {
         var maxWidth = outer.outerWidth(true);
         var actualWidth = 0;
         $.each($('#inner >'), function(i, item) {
           actualWidth += $(item).outerWidth(true);
         });

         if (actualWidth <= maxWidth) {
           setVisible($('#left-button'));
         }
       };
       updateUI();

       $('#right-button').click(function() {
         var leftPos = outer.scrollLeft();
         outer.animate({
           scrollLeft: leftPos - 200
         }, 800, function() {
           debugger;
           if ($('#outer').scrollLeft() <= 0) {
             setInvisible($('#right-button'));
           }
         });
       });

       $('#left-button').click(function() {
         setVisible($('#right-button'));
         var leftPos = outer.scrollLeft();
         outer.animate({
           scrollLeft: leftPos + 200
         }, 800);
       });

       $(window).resize(function() {
         updateUI();
       });
     });

$（函数（）{
var print=函数（msg）{
警报（msg）；
};
var setInvisible=函数（elem）{
元素css（“可见性”、“隐藏”）；
};
var setVisible=功能（元素）{
元素css（“可见性”、“可见”）；
};
var elem=$（“#elem”）；
var items=elem.children（）；
//插入按钮
元素前置（“”）；
//插入内部
项目。wrapAll（“”）；
//插入外部
调试器；
元素查找（“#内部”）.wrap（“”）；
外部变量=$（“#外部”）；
var updateUI=函数（）{
var maxWidth=outer.outerWidth（真）；
var实际宽度=0；
$。每个（$（“#内部>”），函数（i，项）{
实际宽度+=$（项目）。外径（真）；
});
如果（actualWidth，主要问题似乎是单击左按钮时，没有检查是否应删除箭头的功能

为了测试这一点，我们可以使用已经计算过的实际宽度（但需要将其设置为更全局的，以便移动其声明）

还有一件小事情需要纠正-如果maxWidth大于实际宽度，则不需要箭头。因此，在下面的代码中，setVisible已变为setVisibleIfNeeded

这是修改后的JS——原版取自JSFIDLE。每一次修改旁边都有一个注释

  $(function() {
   var print = function(msg) {
     alert(msg);
   };

   var setInvisible = function(elem) {
     elem.css('visibility', 'hidden');
   };
   var setVisibleIfNeeded = function(elem) {
     if (actualWidth>maxWidth) {//NOTE we don't want to show the arrows if there is space in the div for everything without the need to scroll
       elem.css('visibility', 'visible');
     }
   };

   var elem = $("#elem");
   var items = elem.children();

   // Inserting Buttons
   elem.prepend('<div id="right-button" style="visibility: hidden;"><a href="#"><</a></div>');
   elem.append('  <div id="left-button" style="visibility: hidden;"><a href="#">></a></div>');//NOTE: visibility set to hidden

   // Inserting Inner
   items.wrapAll('<div id="inner" />');

   // Inserting Outer
   debugger;
   elem.find('#inner').wrap('<div id="outer"/>');

   var outer = $('#outer');
   var actualWidth=0;//NOTE the declaration is moved up here from the function it was in
   var maxwidth=0;//ditto
   
   var updateUI = function() {
     maxWidth = outer.outerWidth(true);
     actualWidth = 0;
     $.each($('#inner >'), function(i, item) {
       actualWidth += $(item).outerWidth(true);
     });
     setVisibleIfNeeded($('#left-button'));
   };
   updateUI();  

   $('#right-button').click(function() {
     setVisibleIfNeeded($('#left-button'));//NOTE added
     var leftPos = outer.scrollLeft();
     outer.animate({
       scrollLeft: leftPos - 200
     }, 800, function() {
       debugger;
       if ($('#outer').scrollLeft() <= 0) {
         setInvisible($('#right-button'));
       }
     });
   });

   $('#left-button').click(function() {
     setVisibleIfNeeded($('#right-button'));
     var leftPos = outer.scrollLeft();
     outer.animate({
       scrollLeft: leftPos + 200
     }, 800,function() {//NOTE function added here to get rid of left button 
      if (leftPos>=(actualWidth-400)) {setInvisible($('#left-button'));}
     });
   });

   $(window).resize(function() {
     updateUI();
   });
 });

$（函数（）{
var print=函数（msg）{
警报（msg）；
};
var setInvisible=函数（elem）{
元素css（“可见性”、“隐藏”）；
};
var setVisibleIfNeeded=函数（元素）{
if（actualWidth>maxWidth）{//注意，如果div中有空间存放所有内容，而不需要滚动，则不希望显示箭头
元素css（“可见性”、“可见”）；
}
};
var elem=$（“#elem”）；
var items=elem.children（）；
//插入按钮
元素前置（“”）；//注意：可见性设置为隐藏
//插入内部
项目。wrapAll（“”）；
//插入外部
调试器；
元素查找（“#内部”）.wrap（“”）；
外部变量=$（“#外部”）；
var actualWidth=0；//注意声明是从它所在的函数移到这里的
var maxwidth=0；//同上
var updateUI=函数（）{
maxWidth=outer.outerWidth（真）；
实际宽度=0；
$。每个（$（“#内部>”），函数（i，项）{
实际宽度+=$（项目）。外径（真）；
});
SetVisibleIfRequired（$（“#左按钮”）；
};
updateUI（）；
$（“#右键”）。单击（函数（）{
setVisibleIfRequired（$（“#左按钮”）；//添加了注释
var leftPos=outer.scrollLeft（）；
外部动画({
向左滚动：左位置-200
}，800，函数（）{
调试器；
if（$（'#外部'）.scrollLeft（）=（实际宽度-400））{setInvisible（$（'#左按钮'））；}
});
});
$（窗口）。调整大小（函数（）{
updateUI（）；
});
});