Question

我正在请求您对此tinyscrollbar插件的帮助。用户可以用一些文本/问题填充此textarea并且滚动条应该更新 - 它不会:( 也许我只是让用户给我打电话：）

这是我的代码：

<div id="ques-wrap">
  <div id="scrollbar1">
    <div class="scrollbar">
      <div class="track">
        <div class="thumb">
          <div class="end"></div>
          </div>
        </div>
      </div>

      <div class="viewport">
        <div class="overview">
          <textarea id="ques" class=" required " onfocus="if (this.value == 'ask question') {this.value = '';}" onblur="if (this.value == '') {this.value = 'ask question';}"type="text" name="question" value="ask question" size="30">ask question</textarea>
        </div>
      </div>
   </div>
 </div>

jquery-version 1

 var oScrollbar = $('#scrollbar1');
 $(document).ready(function () {
     oScrollbar.tinyscrollbar();
     oScrollbar.tinyscrollbar_update();
     $('#scrollbar1').tinyscrollbar();
 });

jquery-version 2

$(document).ready(function () {
     // To fix scrollbar not showing all content
     function refreshScrollbar(scrollbar, counter, delay) {
         if (counter > 0) {
             counter--;
             scrollbar.tinyscrollbar_update('relative');
             setTimeout(function () {
                 refreshScrollbar(scrollbar, counter, delay);
             }, delay);
         }
     }
     $('#scrollbar1').tinyscrollbar();
     $("#scrollbar1 .scrollbar .viewport .overview #ques").load(function () {
         refreshScrollbar($('#scrollbar1'), 10, 250);
     });
 });

CSS

    #ques-wrap #scrollbar1 { width: 405px; clear: both; margin: 0px 0 10px; }
      #ques-wrap #scrollbar1 .viewport { width: 355px; height:40px; overflow: hidden; position:  relative; left: -17px;}
         #ques-wrap #scrollbar1 .overview { list-style: none; position: absolute; right: 0; top: 0; }
               #scrollbar1 .thumb .end,#scrollbar1 .thumb { background-color: #fb4365; }
                 #ques-wrap #scrollbar1 .scrollbar { position: relative; float: right; width: 15px; }

       #ques-wrap #scrollbar1 .track { background-color: #b5b4b4; height: 100%; width:2px;  position: relative; right:2px; }
      #scrollbar1 .track { background-color: #b5b4b4; height: 100%; width:2px; position: relative; right:2px; }
         #scrollbar1 .thumb { height: 20px; width: 6px; cursor: pointer; overflow:hidden;            -webkit-border-radius: 10px;
               -moz-border-radius: 10px;

     border-radius: 10px; position: absolute; top: 0; right: -2px;}
    #scrollbar1 .thumb .end { overflow: hidden; height: 5px; width: 6px; }
   #scrollbar1 .disable{ display: none; }
   .noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-  user-select: none; -webkit-user-select: none; }
#ques-wrap {
padding-top: 40px;
   }
    #ques {
    border:none;
    width: 355px;
    height:51px;
    background: none;
    color:#fff;
    margin-right: 19px;
    padding-left: 2px;
    direction: rtl;
    outline: none;
    }

Answer 1

我建议您尝试http://rocha.la/jQuery-slimScroll

这是一种简单的方法

tinyscrollbar：我做得对吗？

1 个答案: