如何在slimScroll中设置最小高度和最大高度

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

本文关键字：高度 小高 设置 slimScroll      更新时间：2023-09-26

如何在slimScroll插件中添加最小高度和最大高度？我在文本区域应用了这个插件，文本区域的最大高度需要滚动，默认文本区域的最小高度为120px，最大高度为200px

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

如果查看源代码，可以看到默认选项

 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'
  };

我认为你不能通过插件添加最小高度和最小宽度有两个选项

  • 研究源代码，然后添加额外的样式属性

  • 或/尝试使用css

在源代码行中添加注释行（164和176）var包装器=$（divS）.addClass（o.wrapperClass）.css({position:'相对'，溢出："隐藏"，宽度：o.width，高度：o.height/*最小高度：o.min高度，最小宽度：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
          */
        });

您的问题很难理解，但我认为您的意思是让textarea只有在超过您想要设置的max-height时才可滚动？默认情况下不能这样做，但可以更改一些源代码。

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

在本线程中更详细地描述：https://github.com/rochal/jQuery-slimScroll/issues/70

设置height: auto并设置父级最小高度

<div class='parent' style='min-height:400px;'>
   <div class='scroll'>
     //content
   </div>
</div>

<script>
 $(".scroll").slimScroll({
        height: 'auto'
    });
</script>

这对我来说是个把戏。

$("xxx").slimScroll({
  size: '8px',
  width: '100%',
  height: 'fit-content',
  color: '#ff4800',
  allowPageScroll: true,
  alwaysVisible: false,
  railVisible: true,
  // scroll amount applied to each mouse wheel step
  wheelStep: 20,
  // scroll amount applied when user is using gestures
  touchScrollStep: 200,
  // distance in pixels between the side edge and the scrollbar
  //distance: '10px',
}).css("max-height", "50vh").parent().css("max-height", "50vh");
相关文章：