DIV Thanh cuộn dọc trên bên trái

Question

Có thể đặt thanh cuộn dọc DIV ở bên trái của div bằng css không? những gì về jscript?

Answer 1

Bạn có thể thêm một giả cuộn bất cứ nơi nào bạn muốn với JQuery và plugin này: JScrollPane

Answer 2

Được rồi, vì vậy, tôi đã viết một plugin jQuery để cung cấp cho bạn một thanh cuộn bên trái hoàn toàn bản địa nhìn.

Left Scrollbar Hack Demo

Dưới đây là cách hoạt động:

1. Tiêm một bên div bên cửa sổ để cho phép tính toán chiều rộng nội dung (content_width). Sau đó, bằng cách sử dụng này, chiều rộng thanh cuộn gốc có thể được tính toán: scrollbar_width = parent_width - content_width - horizontal_padding.

2. Tạo hai khác nhau divs bên trong ngăn, cả hai đều chứa đầy nội dung.

   • Mục đích của một người là "người tạo". Nó được sử dụng chỉ cho thanh cuộn. Sử dụng một lề trái tiêu cực, các plugin kéo nó trái để chỉ thanh cuộn là trong xem (nội dung của div này được cắt bớt ở cạnh).

   • div khác được sử dụng để thực sự chứa nội dung cuộn có thể nhìn thấy.

3. Bây giờ, đã đến lúc kết hợp cả hai. Mỗi 50ms (window.setInterval), giá trị chênh lệch scrollTop từ "poser" div được áp dụng cho nội dung có thể nhìn thấy, cuộn div. Vì vậy, khi bạn cuộn lên hoặc xuống bằng thanh cuộn trên bên trái, độ lệch cuộn được áp dụng trở lại trên div với nội dung hiển thị.

lời giải thích này có lẽ hút và có thực sự là một khá hơn một chút để nó mà tôi không mô tả, nhưng, không có thêm ado, ở đây nó là:

$.fn.leftScrollbar = function(){ 
    var items = $(this); 
    $(function(){ 
     items.each(function(){ 
      var e = $(this); 
      var content = e.html(); 
      var ie = !jQuery.support.boxModel; 
      var w = e[ie?'innerWidth':'width'](), h = e[ie?'innerHeight':'height'](); 
      //calculate paddings 
      var pad = {}; 
      $(['top', 'right', 'bottom', 'left']).each(function(i, side){ 
       pad[side] = parseInt(e.css('padding-' + side).replace('px','')); 
      }); 
      //detect scrollbar width 
      var xfill = $('<div>').css({margin:0, padding:0, height:'1px'}); 
      e.append(xfill); 
      var contentWidth = xfill.width(); 
      var scrollerWidth = e.innerWidth() - contentWidth - pad.left - pad.right; 
      e.html('').css({overflow:'hidden'}); 
      e.css('padding', '0'); 

      var poserHeight = h - pad.top - pad.bottom; 
      var poser = $('<div>') 
       .html('<div style="visibility:hidden">'+content+'</div>') 
       .css({ 
        marginLeft: -w+scrollerWidth-(ie?0:pad.left*2), 
        overflow: 'auto' 
       }) 
       .height(poserHeight+(ie?pad.top+pad.bottom:0)) 
       .width(w); 

      var pane = $('<div>').html(content).css({ 
       width: w-scrollerWidth-(ie?0:pad.right+pad.left), 
       height: h-(ie?0:pad.bottom+pad.top), 
       overflow: 'hidden', 
       marginTop: -poserHeight-pad.top*2, 
       marginLeft: scrollerWidth 
      }); 

      $(['top', 'right', 'bottom', 'left']).each(function(i, side){ 
       poser.css('padding-'+side, pad[side]); 
       pane.css('padding-'+side, pad[side]); 
      }); 
      e.append(poser).append(pane); 

      var hRatio = (pane.innerHeight()+pad.bottom)/poser.innerHeight(); 
      window.setInterval(function(){ 
       pane.scrollTop(poser.scrollTop()*hRatio); 
      }, 50); 
     }); 
    }); 
}; 

Khi bạn đã bao gồm jQuery và plugin này trong trang, áp dụng thanh cuộn bên trái:

$('#scrollme').leftScrollbar(); 

Thay #scrollme với bộ chọn CSS để các yếu tố (s) bạn muốn áp dụng thanh cuộn bên trái để.

(và, rõ ràng, điều này làm giảm độc đáo)

Answer 3

Tôi đã có một trường hợp sử dụng đơn giản để lựa chọn một giải pháp css đơn giản:

<div style="direction: rtl; height: 250px; overflow: scroll;"> 
    <div style="direction: ltr; padding: 3px;"> 
    Content goes here 
    </div> 
</div>