textarea使用asScrollable库时滚动条无法显示如何解决

云上老周

2026-8-31

问题描述

需要在textarea元素上实现自定义滚动条效果，当前使用asScrollable库编写的代码运行异常，textarea的自定义滚动条无法正常显示。

在线示例地址：http://ourgoodguide.com/sites/scrollersandothers/asScrollable/index.html

原实现完整代码如下：

<!doctype html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>jQuery asScrollable</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/asScrollable.css">
  <style type="text/css">
    body {
      background-color: #f7f7f7;
    }

    .section {
      padding: 20px;
    }

    .inner {
      margin: 0 auto;
      max-width: 960px;
    }

    .example {
      overflow: hidden;
      border: 1px solid #e0e0e0;
      -webkit-box-shadow: 1px 1px 2px 0px rgba(200, 200, 200, 0.3);
      -moz-box-shadow: 1px 1px 2px 0px rgba(200, 200, 200, 0.3);
      box-shadow: 1px 1px 2px 0px rgba(200, 200, 200, 0.3);
      background-color: #fefefe;
    }

    .box,
    .simple, .special {
      height: 200px;
    }
  </style>
</head>
<body>
  <!--[if lt IE 8]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
  <![endif]-->
  <div>
    <div>
      <section>
        <h3>Vertical Scrollable</h3>
        <div>
          <div>
            <div>
           <textarea class="special" style="overflow-y: scroll !important;
border-radius: 25px;
position: relative;
height: 279px;"data-options='{"direction": "vertical", "contentSelector": ">", "containerSelector": ">"}' rows="10" cols="10">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</textarea>
            </div>
          </div>
        </div>
      </section>
      <section>
        <h3>Horizontal Scrollable</h3>
        <div class="example box" data-options='{"direction": "horizontal", "contentSelector": ">", "containerSelector": ">"}'>
          <div>
            <div>
              <img data-src="holder.js/1500x200/sky" width="2000" />
            </div>
          </div>
        </div>
      </section>
      <section>
        <h3>Both Scrollable</h3>
        <div class="example box" data-options='{"direction": "both", "contentSelector": ">", "containerSelector": ">"}'>
          <div>
            <div>
              <img data-src="holder.js/1500x400/sky" width="1500" height="400" />
            </div>
          </div>
        </div>
      </section>
      <section>
        <h3>Both Scrollable With No scroll</h3>
        <div class="example box" data-options='{"direction": "both", "contentSelector": ">", "containerSelector": ">"}'>
          <div>
            <div>
              <img data-src="holder.js/100%x200/lava" width="100%" height="200" />
            </div>
          </div>
        </div>
      </section>
      <section>
        <h3>Auto x</h3>
        <div class="example box" style="overflow-x: auto; overflow-y: hidden" data-options='{"direction": "auto", "contentSelector": ">", "containerSelector": ">"}'>
          <div>
            <div>
              <img data-src="holder.js/1200x200/vine" width="1200" height="200" />
            </div>
          </div>
        </div>
      </section>
      <section>
        <h3>Auto y</h3>
        <div class="example box" style="overflow-y: auto; overflow-x: hidden" data-options='{"direction": "auto", "contentSelector": ">", "containerSelector": ">"}'>
          <div>
            <div>
              <img data-src="holder.js/958x300/vine" width="958" height="300" />
            </div>
          </div>
        </div>
      </section>
      <section>
        <h3>Auto both</h3>
        <div class="example box" style="overflow: auto" data-options='{"direction": "auto", "contentSelector": ">", "containerSelector": ">"}'>
          <div>
            <div>
              <img data-src="holder.js/1200x300/vine" width="1200" height="300" />
            </div>
          </div>
        </div>
      </section>
      <section>
        <h3>Auto none</h3>
        <div class="example box" data-options='{"direction": "auto", "contentSelector": ">", "containerSelector": ">"}'>
          <div>
            <div>
              <img data-src="holder.js/958x200/lava" width="958" height="200" />
            </div>
          </div>
        </div>
      </section>
      <section>
        <h3>Simple Structure</h3>
        <div class="simple example">
          <div>
            <div>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam malesuada at metus eget sodales. Aenean tincidunt mi sed orci sollicitudin placerat. Nullam tempus nisl augue, sed pulvinar eros lacinia vitae. Mauris vehicula velit a nibh dapibus vehicula. Fusce dui tellus, tincidunt sit amet porttitor efficitur, aliquam ac arcu. Cras non tempor dui. Nunc a dolor sit amet dolor bibendum auctor a eu ipsum.</p>
              <p>Pellentesque lobortis facilisis risus, sit amet maximus turpis venenatis vitae. Donec nec eros iaculis, congue risus at, tempus augue. Donec quis felis vel purus pretium tincidunt. Integer sodales ultricies tristique. Phasellus et risus sagittis, dictum tortor a, semper lorem. Vivamus quis ipsum velit. Nam molestie ut ipsum ultricies volutpat. Integer molestie sagittis tempor. Integer vitae mauris est. Ut laoreet dignissim tellus, non accumsan erat gravida vel. Curabitur non erat id velit aliquam malesuada. Proin aliquet cursus orci quis pulvinar.</p>
              <p>Duis elit massa, scelerisque sed nisl sed, tempus iaculis felis. Duis accumsan eget justo id auctor. Aliquam consequat odio non dolor efficitur, hendrerit porttitor neque porttitor. Integer varius maximus nunc, at malesuada leo tristique id. Sed aliquet pharetra ipsum, non interdum lacus dictum sit amet. Curabitur semper imperdiet sem eget interdum. Nunc at egestas tellus, vel tincidunt lacus. Fusce eget neque vel leo volutpat tincidunt ac non enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus cursus leo in felis viverra interdum.</p>
              <p>Mauris id ultricies magna. Quisque rutrum lobortis elit blandit rutrum. Curabitur mattis enim lorem, eget tempor nunc pretium dignissim. Cras tincidunt ac nisl eget finibus. Fusce lobortis turpis sed dui mollis, eget fringilla risus porttitor. In id neque vitae lorem pharetra sodales. Morbi neque ex, mattis at dolor quis, consequat tincidunt leo. Vivamus sagittis placerat sem at porta.</p>
              <p>Proin varius arcu ac ligula suscipit, sit amet pretium lectus tincidunt. Aliquam eu mi imperdiet, efficitur tellus ac, mollis eros. Cras malesuada feugiat pharetra. Curabitur lectus lacus, bibendum sed odio at, egestas tempor nisl. Vivamus sagittis est porta velit pretium, in elementum arcu tempus. Ut id cursus libero, non ullamcorper velit. Cras pretium arcu lacus, nec dignissim elit accumsan vitae. Aliquam tristique lorem et tempus congue. Donec vel metus enim. Praesent sed turpis et magna suscipit tincidunt. Proin efficitur neque non sapien cursus vehicula. Suspendisse iaculis, neque vel convallis lobortis, mauris dui posuere mi, at maximus lorem tortor a metus. Ut in quam efficitur, finibus nulla et, feugiat orci.</p>
              <p>Sed mattis volutpat enim eget porttitor. Sed lectus ligula, condimentum nec elit eget, vehicula porttitor nunc. Curabitur pulvinar leo velit, a convallis tellus suscipit ac. Donec tempor est ut sagittis varius. Mauris maximus nunc metus, non venenatis justo ornare vel. Phasellus iaculis erat sit amet enim fermentum mattis. Cras sollicitudin tortor dolor, ac aliquam dolor iaculis non. Donec sed sodales enim. Suspendisse potenti. Integer quis turpis cursus enim consectetur fringilla eu eu ante.</p>
            </div>
          </div>
        </div>
      </section>
      <section>
        <div>
          <button class="api-scroll-to" data-to="0">Scroll to 0</button>
          <button class="api-scroll-to" data-to="50">Scroll to 50</button>
          <button class="api-scroll-to" data-to="0%">Scroll to 0%</button>
          <button class="api-scroll-to" data-to="100%">Scroll to 100%</button>
          <button class="api-scroll-to" data-to="50%">Scroll to 50%</button>
        </div>
        <div>
          <button class="api-scroll-by" data-by="10">Scroll by 10</button>
          <button class="api-scroll-by" data-by="+10">Scroll by +10</button>
          <button class="api-scroll-by" data-by="-10">Scroll by -10</button>
          <button class="api-scroll-by" data-by="10%">Scroll by 10%</button>
          <button class="api-scroll-by" data-by="+10%">Scroll by +10%</button>
          <button class="api-scroll-by" data-by="-10%">Scroll by -10%</button>
        </div>
        <div>
          <button class="api-init">Init</button>
          <button class="api-enable">enable</button>
          <button class="api-disable">disable</button>
          <button class="api-destroy">Destroy</button>
        </div>
      </section>
    </div>
  </div>
  <script src="js/jquery.js"></script>
  <script src="js/holder.js"></script>
  <script src="js/jquery-asScrollbar.js"></script>
  <script src="js/jquery-asScrollable.js"></script>
  <script type="text/javascript">
    jQuery(function($) {
      Holder.run();
      $('.box').asScrollable();
jQuery(function($) {
  $('.special').asScrollable(); 
});
      $('.simple').asScrollable({
        contentSelector: ">",
        containerSelector: ">"
      });
      $('.box').on('asScrollable::scrolltop', function(e, api, direction) {
        console.info('top:' + direction);
      });
      $('.box').on('asScrollable::scrollend', function(e, api, direction) {
        console.info('end:' + direction);
      });
      $('.api-scroll-to').on('click', function() {
        var to = $(this).data('to');
        $('.simple').asScrollable('scrollTo', 'vertical', to);
        $('.simple').asScrollable('scrollTo', 'horizontal', to);
      });
      $('.api-scroll-by').on('click', function() {
        var to = $(this).data('by');
        $('.simple').asScrollable('scrollBy', 'horizontal', to);
        $('.simple').asScrollable('scrollBy', 'vertical', to);
      });
      $('.api-init').on('click', function() {
        $('.simple').asScrollable({
          contentSelector: ">",
          containerSelector: ">"
        });
      });
      $('.api-enable').on('click', function() {
        $('.simple').asScrollable('enable');
      });
      $('.api-disable').on('click', function() {
        $('.simple').asScrollable('disable');
      });
      $('.api-destroy').on('click', function() {
        $('.simple').asScrollable('destroy');
      });
    });
  </script>
</body>
</html>

问题原因

元素使用逻辑错误：asScrollable的工作原理是在目标元素内部查找内容容器、滚动容器节点，通过新增包裹层、同步滚动偏移的方式模拟自定义滚动条。但textarea是原生表单元素，内部不存在可被库操作的子DOM结构，直接在textarea上初始化时，库无法完成DOM结构改造，自然无法生成自定义滚动条。
样式冲突：给textarea设置了内联样式overflow-y: scroll !important，会强制显示浏览器原生滚动条，覆盖asScrollable初始化时需要设置的overflow: hidden基础样式，导致自定义滚动条逻辑被拦截。
初始化逻辑问题：初始化.special元素时没有传入匹配的配置参数，且冗余嵌套了一层jQuery(function($) {})DOM就绪监听，导致配置读取逻辑失效。

修复方案

注意：asScrollable这类自定义滚动条库不支持直接在原生自带滚动行为的表单元素（textarea、input等）上初始化，必须通过外层容器包裹的方式实现效果。

调整DOM结构：移除textarea上的special类，新增一个外层div包裹textarea，将special类加在外层div上，把asScrollable初始化在这个外层容器上。
修正样式冲突：删除textarea上的overflow-y: scroll !important内联样式，给外层包裹容器设置固定高度、overflow: hidden、圆角边框等基础样式，textarea本身设置宽高100%、无边框、禁止原生缩放、内边距适配容器尺寸。
修正JS初始化逻辑：删除冗余的DOM就绪嵌套，给.special外层容器传入正确的垂直滚动配置参数。

核心修复代码示例：

DOM结构修改

<!-- 替换原有直接在textarea上加special类的写法 -->
<section>
  <h3>Vertical Scrollable</h3>
  <div class="special example">
    <textarea rows="10" cols="10">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut od