Bootstrap 4中的滚动选项卡

此外，您可以通过确保最后一个标签的正确位置不小于包装纸宽度以使其与右边缘对齐来改善其位置... var widthOfHidden = function(){ var ww = 0 - $('.wrapper').outerWidth(); var hw = (($('.wrapper').outerWidth())-widthOfList()-getLeftPosi())-scrollBarWidths; var rp = $(document).width() - ($('.nav-item.nav-link').last().offset().left + $('.nav-item.nav-link').last().outerWidth()); if (ww>hw) { return (rp>ww?rp:ww); } else { return (rp>hw?rp:hw); }};I am working on scrolling tab. Below is my code. I am facing problem that I am not able to click middle tabs. On right button click tabs scrolls move it gradually. What should I do to move tabs gradually? Please helpvar hidWidth;var scrollBarWidths = 40;var widthOfList = function() { var itemsWidth = 0; $('.list a').each(function() { var itemWidth = $(this).outerWidth(); itemsWidth += itemWidth; }); return itemsWidth;};var widthOfHidden = function() { return (($('.wrapper').outerWidth()) - widthOfList() - getLeftPosi()) - scrollBarWidths;};var getLeftPosi = function() { return $('.list').position().left;};var reAdjust = function() { if (($('.wrapper').outerWidth()) < widthOfList()) { $('.scroller-right').show().css('display', 'flex'); } else { $('.scroller-right').hide(); } if (getLeftPosi() < 0) { $('.scroller-left').show().css('display', 'flex'); } else { $('.item').animate({ left: "-=" + getLeftPosi() + "px" }, 'slow'); $('.scroller-left').hide(); }}reAdjust();$(window).on('resize', function(e) { reAdjust();});$('.scroller-right').click(function() { $('.scroller-left').fadeIn('slow'); $('.scroller-right').fadeOut('slow'); $('.list').animate({ left: "+=" + widthOfHidden() + "px" }, 'slow', function() { });});$('.scroller-left').click(function() { $('.scroller-right').fadeIn('slow'); $('.scroller-left').fadeOut('slow'); $('.list').animate({ left: "-=" + getLeftPosi() + "px" }, 'slow', function() { });});Fiddle http://jsfiddle.net/vedankita/2uswn4od/13Help me to scroll slowly on button click so that I can click on ease tab. Thanks 解决方案 You should incrementally move the tabs "width of hidden", but no more than wrapper width... var widthOfHidden = function(){ var ww = 0 - $('.wrapper').outerWidth(); var hw = (($('.wrapper').outerWidth())-widthOfList()-getLeftPosi())-scrollBarWidths; if (ww>hw) { return ww; } else { return hw; }};var getLeftPosi = function(){ var ww = 0 - $('.wrapper').outerWidth(); var lp = $('.list').position().left; if (ww>lp) { return ww; } else { return lp; }};And then "readjust" after each movement to determine whether or not the scroll arrows still need to show...$('.scroller-right').click(function() { $('.scroller-left').fadeIn('slow'); $('.scroller-right').fadeOut('slow'); $('.list').animate({left:"+="+widthOfHidden()+"px"},'slow',function(){ reAdjust(); });});$('.scroller-left').click(function() { $('.scroller-right').fadeIn('slow'); $('.scroller-left').fadeOut('slow'); $('.list').animate({left:"-="+getLeftPosi()+"px"},'slow',function(){ reAdjust(); });});Demo: https://www.codeply.com/go/Loo3CqsA7TAlso, you can improve the position of the last tab by making sure it's right position is never less than wrapper width to keep it aligned to the right edge...var widthOfHidden = function(){ var ww = 0 - $('.wrapper').outerWidth(); var hw = (($('.wrapper').outerWidth())-widthOfList()-getLeftPosi())-scrollBarWidths; var rp = $(document).width() - ($('.nav-item.nav-link').last().offset().left + $('.nav-item.nav-link').last().outerWidth()); if (ww>hw) { return (rp>ww?rp:ww); } else { return (rp>hw?rp:hw); }}; 这篇关于Bootstrap 4中的滚动选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 1403页，肝出来的..