如何将 JavaScript 滚动条附加到文本区域？

Question

我有一个JavaScript滚动条，它替换了正常的Webkit / Mozilla滚动条。在我的其他所有div上，只需输入div名称“.element”即可正常工作。但是我不知道如何将滚动条应用于文本区域？有人知道我该如何做吗？谢谢大家的帮助。

JAVASCRIPT：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="assets/js/scroll/jquery.mousewheel.min.js"></script>
<script src="assets/js/scroll/jquery.mCustomScrollbar.js"></script>

<script>
    (function($){
        $(window).load(function(){
            $(".bio textarea").mCustomScrollbar();
        });
    })(jQuery);
</script>

HTML:

<form action="includes/changebio.php" method="post" id="form1">         
 <textarea id="bio" style="width: 442px; 
    margin-top:3px;
    text-align:left;
    margin-left:-2px;
    height: 120px;
    resize: none; 
  outline:none;
    border: hidden;" textarea name="bio" data-id="bio" maxlength="710"><?php echo stripslashes($profile['bio']); ?></textarea>
<input type="image" src="assets/img/icons/save-edit.png"class="bio-submit" name="submit" value="submit" id="submit"/>
</form>

- Bear John

Answer 1

这个脚本可以帮助您样式化文本区域；http://studio.radube.com/html-textarea-custom-scrollbar。它可以使用您自己的图像和CSS进行自定义。

此外，请查看这个jQuery插件：

http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html

- Michael Rader

Answer 2

改变脚本如下：

<script>
    (function($){
        $(window).load(function(){
            $("textarea#bio").mCustomScrollbar();
        });
    })(jQuery);
</script>

因为你的textarea没有class为"bio"的父元素。 在你的情况下，选择器是错误的。更改选择器"textarea#bio"，可以解决你的问题。

如果这个答案解决了你的问题，请接受它。

- Thangaraju