Javascript 只读文本区域上的滚动条

文本区域使用ng readonly处于只读模式，因此不会出现滚动条拇指。我没有使用webkit。我的html代码如下：

<textarea dataitemfqn="ClientBulletin.Handling.WCUniqueInstructions.ReturnToWork.SpecialHandlingInstructions3" 
          id="SpecialHandlingInstructions3"                                      
          ng-model="ClientBulletin.HandlingData.Handling.SpecialHandlingInstructions3" 
          ng-readonly="BulletinEditMode == false" 
          class="textarea-scrollbar" 
          onkeyup="resizeTextarea('SpecialHandlingInstructions3')">
</textarea>

- JavaScript如下所示：

.textarea-scrollbar {
    /*overflow:scroll !important;*/    
    overflow-y: scroll !important;
    height: 50px;
    padding-bottom: 120px;
    resize: both !important;
    -ms-overflow-style: scrollbar;
    min-height:50px;
    max-height:200px;    
}

.textarea-scrollbar::-webkit-scrollbar {
    width: 12px;
}

.textarea-scrollbar::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #555;
}

function resizeTextarea(id) {
    var a = document.getElementById(id);
    a.style.height = '50px';
    a.style.height = a.scrollHeight + 'px';
}

function init() {
    var a = document.getElementById('SpecialHandlingInstructions3');
    for (var i = 0, inb = a.length; i < inb; i++) {
        if (a[i].getAttribute('data-resizable') == 'true')
            resizeTextarea(a[i].id);
    }
}

滚动条拇指没有出现。我的客户是严格寻找滚动条拇指，而不是文本区域的大小。

---

我甚至尝试将TextArea嵌入到Div中，但仍然没有得到预期的结果。请提供帮助。

为了使子元素生效，您至少需要自定义滚动条。例如，尝试添加以下CSS：

.textarea-scrollbar::-webkit-scrollbar {
    width: 12px;
}

然后.textarea scrollbar:：-webkit scrollbar thumb也可以使用

.text区域滚动条{ /*溢出：滚动！重要；*/ 溢出y：滚动！重要； 高度：50px； 填充底部：120px； 调整大小：两者都有！重要； -ms溢出样式：滚动条； 最小高度：50px； 最大高度：200px； } .textarea滚动条：--webkit滚动条{ 宽度：12px； } .textarea滚动条：：-webkit滚动条拇指{ 边界半径：10px； -webkit盒阴影：插入0 0 6px rgba0,0,0,3； 背景色：555； }

---

谢谢你的建议。我添加了代码snipet，但它不起作用，因为expectedIt是一个仅适用于webkit的功能，因此它只适用于Chrome，而不适用于Firefox或Internet Explorer。你测试的浏览器是什么？我使用的是IE11，我建议找一个插件来设置滚动条的样式，因为并不是所有的浏览器都支持这个功能。例如，应该为您解决这个问题。我的文本区域是只读的，使用ng readonly，因此不会显示滚动条拇指。你能提出克服这个问题的方法吗？谢谢你的建议。我已经添加了你建议的css，但仍然没有按预期工作，滚动条拇指没有出现。textarea滚动条{/*溢出：滚动！重要；*/overflow-y:scroll！重要；高度：50px；填充底部：120px；调整大小：两个！重要；-ms溢出样式：滚动条；最小高度：50px；最大高度：200px；}。textarea滚动条：：-webkit滚动条{宽度：12px；}

.textarea-scrollbar::-webkit-scrollbar {
    width: 12px;
}