Сделайте сплиттер очень тонким и возьмите его

Question

Я хочу сделать разделитель между двумя панелями. Ниже приведена рабочая версия.

Теперь я хочу сделать ширину handle максимально тонкий (меньше чем 0.1px?), поэтому нет способа сделать ширину (казаться) меньше, чем 1px?

Кроме того, когда разветвитель тонкий, его трудно выделить мышью. Есть ли способ сделать сплиттер удобным?

На примере JSBin, как им удалось реализовать сплиттеры среди панелей?

(function($) {
  $.fn.drags = function(opt) {
    
    opt = $.extend({
      handle: "",
      cursor: "ew-resize",
      min: 10
    }, opt);

    if (opt.handle === "") {
      var $el = this;
    } else {
      var $el = this.find(opt.handle);
    }

    var priorCursor = $('body').css('cursor');

    return $el.css('cursor', opt.cursor).on("mousedown", function(e) {
      
      priorCursor = $('body').css('cursor');
      $('body').css('cursor', opt.cursor);

      if (opt.handle === "") {
        var $drag = $(this).addClass('draggable');
      } else {
        var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
      }
      
      var z_idx = $drag.css('z-index'),
        drg_h = $drag.outerHeight(),
        drg_w = $drag.outerWidth(),
        pos_y = $drag.offset().top + drg_h - e.pageY,
        pos_x = $drag.offset().left + drg_w - e.pageX;
      
      var mouseMove = function(e) {        
        
        var prev = $('.draggable').prev();
        var next = $('.draggable').next();

        var total = prev.outerWidth() + next.outerWidth();
        
        var totalPercentage = parseFloat(prev.css('flex')) +  parseFloat(next.css('flex'));

        var offset = prev.offset();
        if(offset){
          var leftPercentage = ((e.pageX - offset.left - drg_w / 2) / total) * totalPercentage;
          var rightPercentage = totalPercentage - leftPercentage;

          if (leftPercentage * 100 < opt.min || rightPercentage * 100 < opt.min) {
            return;
          }

          prev.css('flex', leftPercentage.toString());
          next.css('flex', rightPercentage.toString());
        }
      }
      
      $drag.css('z-index', 1000).parent().on("mousemove", mouseMove).on("mouseup", function() {
            $(this).off("mousemove", mouseMove).off("mouseup");
            $('body').css('cursor', priorCursor);
            $('.draggable').removeClass('draggable').css('z-index', z_idx);
        });
      e.preventDefault(); // disable selection
    });
  }
})(jQuery);

$('.handle').drags();

.flex-box {
  display: flex;
  width: 100%;
  margin: 0;
  height: 300px;
}
.flex-box .col {
  border: 1px solid grey;    
  flex: 0.33;
  padding: 12px;
  overflow-y: auto;
  overflow-x: hide;
}
.handle {
  width: 1px;
  text-align: center;
  background: grey;
  transition: all ease-in 0.1s;
}
.draggable {
  background: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex-box">
  <div class="col">
    <p>Pellentesque ...</p>
  </div>
  <div class="handle"></div>
  <div class="col">
    <p>Pellentesque ...</p>
  </div>
</div>

Answer 1

Если вы хотите, чтобы маркер стал тоньше, попробуйте применить отрицательное значение к правому столбцу, например margin-left: -2px; поэтому он перекрывает левую границу "col" слева от нее. Я не думаю, что вы можете заставить ширину "появляться" как 0.1px. Firefox - единственный браузер, который представляет такую ​​ценность. ( https://css-tricks.com/forums/topic/0-1px-borders/)

.flex-box .col:last-child {
   margin-left: -2px;
}

// поднимаем слой ручки наверх

.handle {
    .....
    z-index: 9999; 
}

Надеюсь это поможет...

*Редактировать:

Это самое близкое, что я мог получить к вашему запросу:

.flex-box {
  display: flex;
  width: 100%;
  margin: 0;
  height: 300px;
}
.flex-box .col {
  border: 1px solid grey;
  flex: 0.33;
  padding: 12px;
  overflow-y: auto;
  overflow-x: hide;
}
.flex-box .col:last-child {
   margin-left: -6px;
}
.handle {
  width: 5px;
  text-align: center; 
  transition: all ease-in 0.1s;
  z-index: 999;
  overflow: visible;  
}
.handle-inner{ 
   width: 5px; 
   height: 100%; 
   position: relative; 
   margin-left: -10px;
} 
.draggable {
  background: grey;  
}

Jsbin: https://jsbin.com/nupefekuhu/edit?html,css,js,output