Отбрасываемые элементы должны быть перетаскиваемыми и сбрасываемыми с самим собой

Я написал версию webkit с некоторыми опциями, такими как auto hide, небольшая версия, прокрутка только-y или только-x

._scrollable{  
    @size: 15px;
    @little_version_ratio: 2;
    @scrollbar-bg-color: rgba(0,0,0,0.15); 
    @scrollbar-handler-color: rgba(0,0,0,0.15);
    @scrollbar-handler-color-hover: rgba(0,0,0,0.3);
    @scrollbar-coner-color: rgba(0,0,0,0);

    overflow-y: scroll;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    height: 100%;


    &::-webkit-scrollbar {
        background: none;
        width: @size;
        height: @size; 
    }
    &::-webkit-scrollbar-track {
        background-color:@scrollbar-bg-color;
        border-radius: @size;

    }
    &::-webkit-scrollbar-thumb {
        border-radius: @size;
        background-color:@scrollbar-handler-color;
        &:hover{
            background-color:@scrollbar-handler-color-hover;

        }
    }
    &::-webkit-scrollbar-corner {
      background-color: @scrollbar-coner-color;
    }

    &.little{
      &::-webkit-scrollbar {
          background: none;
          width: @size / @little_version_ratio;
          height: @size / @little_version_ratio; 
      }
      &::-webkit-scrollbar-track {
          border-radius: @size / @little_version_ratio;
      }
      &::-webkit-scrollbar-thumb {
          border-radius: @size / @little_version_ratio;
      }
    }

    &.autoHideScrollbar{
      overflow-x: hidden;
      overflow-y: hidden;
      &:hover{
            overflow-y: scroll;
            overflow-x: scroll;
            -webkit-overflow-scrolling: touch;
          &.only-y{
              overflow-y: scroll !important;
              overflow-x: hidden !important;
          }

          &.only-x{
              overflow-x: scroll !important;
              overflow-y: hidden !important;
          }
      }
    }


    &.only-y:not(.autoHideScrollbar){
      overflow-y: scroll !important;
      overflow-x: hidden !important;
    }

    &.only-x:not(.autoHideScrollbar){
      overflow-x: scroll !important;
      overflow-y: hidden !important;
    }
}

http://codepen.io/hicTech/pen / KmKrjb

0
задан thillu 4 March 2019 в 07:24
поделиться