简体   繁体   中英

how to set the min-height and max-height in slimScroll?

how to add min-height and max-height in slimScroll plugin? I applying this plugin in text area , the textarea max-height reach it need to be scroll, textarea by default min-height 120px and max-height 200px

<script>
     $(".editTextarea").slimScroll({
                    color: '#e5e5e5',
                    position: 'right',
                    alwaysVisible: false
     });
</script>

if you look at the source code you can see the default option

 var defaults = {
    //Add these lines in your plugin source code
      minHeight:'auto',
      minWidth:'auto'


    width : 'auto',


    height : '250px',


    size : '7px',

    color: '#000',


    position : 'right',


    distance : '1px',


    start : 'top',


    opacity : .4,


    alwaysVisible : false,


    disableFadeOut : false,


    railVisible : false,


    railColor : '#333',


    railOpacity : .2,


    railDraggable : true,


    railClass : 'slimScrollRail',


    barClass : 'slimScrollBar',


    wrapperClass : 'slimScrollDiv',


    allowPageScroll : false,


    wheelStep : 20,


    touchScrollStep : 200,


    borderRadius: '7px',

    railBorderRadius : '7px'
  };

i think you cannot add min-height and min-width through the plugin there are two options

  • study the source code and then add extra style attribute

  • or/ try to use css

add the commented lines in your source line (164 and 176) var wrapper = $(divS) .addClass(o.wrapperClass) .css({ position: 'relative', overflow: 'hidden', width: o.width, height: o.height /* min-heigth:o.minHeight, min-width:o.minWidth */ });

        // update style for the div
        me.css({
          overflow: 'hidden',
          width: o.width,
          height: o.height,
          /*
          min-heigth:o.minHeight,
          min-width:o.minWidth
          */
        });

Your question is hard to understand but I think what you are saying is to make the textarea only scrollable when it exceeds the max-height you want to set? You can not do that by default but you can change some of the source code.

height: o.height and change to 'max-height': o.height (line: 156 and 163)

Described in more detail in this thread: https://github.com/rochal/jQuery-slimScroll/issues/70

set param height auto and for parent min-hegiht

<div class='parent' styly='min-height:400px;'>
   <div class='scroll'>
     //content
   </div>
</div>
<script>
 $(".scroll").slimScroll({
        height: 'auto'
    });

</script>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM