基于水平滚动隐藏箭头

问题描述

我正在努力在以下水平滚动代码中进行微小的更改：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();
       });
     });

解决方法

主要问题似乎在于，单击左键时没有检查箭头是否应被移除的功能。

要对此进行测试，我们可以使用已经计算出的ActualWidth（但需要将其设置为全局值，以便其声明移动）。

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

这是经过修订的JS-原始照片取自jsfiddle。每个更改旁边都有一个注释。

Future.microtask