基于水平滚动的隐藏箭头

Question

我正在努力对此水平滚动代码进行微小的更改：http://jsfiddle.net/Lpjj3n1e/

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

应该有一个快速简便的解决方案，但我一直找不到。请帮助我，并在此先感谢您！

     $(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();
       });
     });

Answer 1

主要问题似乎是单击左键时没有检查箭头是否应该删除的功能。

为了测试这一点，我们可以使用已经计算的实际宽度（但它需要变得更加全局，因此它的声明已经移动）。

还有一个小问题需要纠正 - 如果 maxWidth 大于 actualWidth 则不需要箭头。因此在下面的代码中，setVisible 变成了 setVisibleIfNeeded

这是修改后的 JS - 原件取自 jsfiddle。每个更改旁边都有一个注释。

  $(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();
   });
 });