不採取CSS屬性值DIV的jQuery

Question

我創建

CSS生成

.tablescroll_wrapper 
{ border-left:1;border-top:0; overflow-y:scroll; overflow-x:visible; width:1320px;height:300px;} 

jQuery的

;(function($){ 

    var scrollbarWidth = 0; 

    // http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php 
    function getScrollbarWidth() 
    { 
     if (scrollbarWidth) return scrollbarWidth; 
     var div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div></div>'); 
     $('body').append(div); 
     var w1 = $('div', div).innerWidth(); 
     div.css('overflow-y', 'auto'); 
     var w2 = $('div', div).innerWidth(); 
     $(div).remove(); 
     scrollbarWidth = (w1 - w2); 
     return scrollbarWidth; 
    } 

    $.fn.tableScroll = function(options) 
    { 
     if (options == 'undo') 
     { 
      var container = $(this).parent().parent(); 
      if (container.hasClass('tablescroll_wrapper')) 
      { 
       container.find('.tablescroll_head thead').prependTo(this); 
       container.find('.tablescroll_foot tfoot').appendTo(this); 
       container.before(this); 
       container.empty(); 
      } 
      return; 
     } 

     var settings = $.extend({},$.fn.tableScroll.defaults,options); 

     // Bail out if there's no vertical overflow 
     if ($(this).height() <= settings.height) 
     { 
      return this; 
     } 

     settings.scrollbarWidth = getScrollbarWidth(); 

     this.each(function() 
     { 
      var flush = settings.flush; 

      var tb = $(this).addClass('tablescroll_body'); 

      // find or create the wrapper div (allows tableScroll to be re-applied) 
      var wrapper; 
      if (tb.parent().hasClass('tablescroll_wrapper')) { 
       wrapper = tb.parent(); 
      } 
      else { 
       wrapper = $('<div class="tablescroll_wrapper"></div>').insertBefore(tb).append(tb); 
      } 

      // check for a predefined container 
      if (!wrapper.parent('div').hasClass(settings.containerClass)) 
      { 
       $('<div></div>').addClass(settings.containerClass).insertBefore(wrapper).append(wrapper); 
      } 

      var width = settings.width ? settings.width : tb.outerWidth(); 

      wrapper.css 
      ({ 
       'width': width+'px', 
//    'height': 300+'px', 
       'height': settings.height+'px', 
       'overflow': 'auto' 
      }); 

      tb.css('width',width+'px'); 

      // with border difference 
      var wrapper_width = wrapper.outerWidth(); 
      var diff = wrapper_width-width; 

      // assume table will scroll 
      wrapper.css({width:((width-diff)+settings.scrollbarWidth)+'px'}); 
      tb.css('width',(width-diff)+'px'); 

      if (tb.outerHeight() >= settings.height) 
      { 
       wrapper.css({height:'auto',width:(width-diff)+'px'}); 
//    wrapper.css({height:'300',width:(width-diff)+'px'}); 
       flush = false; 
      } 

      // using wrap does not put wrapper in the DOM right 
      // away making it unavailable for use during runtime 
      // tb.wrap(wrapper); 

      // possible speed enhancements 
      var has_thead = $('thead',tb).length ? true : false ; 
      var has_tfoot = $('tfoot',tb).length ? true : false ; 
      var thead_tr_first = $('thead tr:first',tb); 
      var tbody_tr_first = $('tbody tr:first',tb); 
      var tfoot_tr_first = $('tfoot tr:first',tb); 

      // remember width of last cell 
      var w = 0; 

      $('th, td',thead_tr_first).each(function(i) 
      { 
       w = $(this).width(); 

       $('th:eq('+i+'), td:eq('+i+')',thead_tr_first).css('width',w+'px'); 
       $('th:eq('+i+'), td:eq('+i+')',tbody_tr_first).css('width',w+'px'); 
       if (has_tfoot) $('th:eq('+i+'), td:eq('+i+')',tfoot_tr_first).css('width',w+'px'); 
      }); 

      if (has_thead) 
      { 
       var tbh = $('<table class="tablescroll_head" cellspacing="0"></table>').insertBefore(wrapper).prepend($('thead',tb)); 
      } 

      if (has_tfoot) 
      { 
       var tbf = $('<table class="tablescroll_foot" cellspacing="0"></table>').insertAfter(wrapper).prepend($('tfoot',tb)); 
      } 

      if (tbh != undefined) 
      { 
       tbh.css('width',width+'px'); 

       if (flush) 
       { 
        $('tr:first th:last, tr:first td:last',tbh).css('width',(w+settings.scrollbarWidth)+'px'); 
        tbh.css('width',wrapper.outerWidth() + 'px'); 
       } 
      } 

      if (tbf != undefined) 
      { 
       tbf.css('width',width+'px'); 

       if (flush) 
       { 
        $('tr:first th:last, tr:first td:last',tbf).css('width',(w+settings.scrollbarWidth)+'px'); 
        tbf.css('width',wrapper.outerWidth() + 'px'); 
       } 
      } 
     }); 

     return this; 
    }; 

    // public 
    $.fn.tableScroll.defaults = 
    { 
     flush: true, // makes the last thead and tbody column flush with the scrollbar 
     width: null, // width of the table (head, body and foot), null defaults to the tables natural width 
     height: 100, // height of the scrollable area 
     containerClass: 'tablescroll' // the plugin wraps the table in a div with this css class 
    }; 

})(jQuery); 

當我在瀏覽器中結果檢查是：

<div class="tablescroll_wrapper" style="height: auto; overflow: auto; width: 1361px;"> 

我想只添加水平滾動條到這個我該怎麼做，誰能幫我解決這個問題？

謝謝 Udeshika

Answer 1

在代碼中，你設置的包裝CSS：

wrapper.css 
     ({ 
      'width': width+'px', 
//   'height': 300+'px', 
      'height': settings.height+'px', 
      'overflow': 'auto' 
     }); 

，其結果是如預期：

<div class="tablescroll_wrapper" style="height: auto; overflow: auto; width: 1361px;">

如果你只想要水平滾動條，你需要確保你的CSS是這樣的：

overflow-y:visible; overflow-x:scroll; 

因此，你的包裝pper代碼應該看起來像這樣。

wrapper.css 
     ({ 
      'width': width+'px', 
      'height': settings.height+'px', 
      'overflow-x': 'scroll', 
      'overflow-y': 'visible' 
     }); 

Answer 2

那麼你會希望你的CSS是：

overflow-y:visible; overflow-x:scroll; 

x是水平的; y是垂直的。