Question

TextArea使用“ 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>

css如下：

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

- JavaScript如下：

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

addEventListener（'DOMContentLoaded'，init）; //

$(function () {
    $('#SpecialHandlingInstructions3').each(function () {
        $(this).height($(this).prop('scrollHeight'));        
    });
});

ScrollBar-Thumb没有出现。我的客户严格在寻找ScrollBar-Thumb，而不是在调整TextArea的大小。我什至尝试将TextArea嵌入Div中，但仍然没有得到预期的结果。请帮助。

Answer 1

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

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

然后.textarea-scrollbar::-webkit-scrollbar-thumb也可以工作。

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

<textarea class="textarea-scrollbar" placeholder="Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum">
</textarea>

只读TextArea上的ScrollBar

1 个答案: