`

text area scroll bar custom css

 
阅读更多

 

 

function updatejScrollPaneTextArea(textareaSelector, settings) {
    var textareaClone = $('<div style="word-wrap:break-word" />').appendTo($(textareaSelector).parent());
    var copyAttributes = ['font-family','font-size','font-weight','letter-spacing','word-spacing','line-height','width'];
    for (var i = 0; i < copyAttributes.length; i++) {
        textareaClone.css(copyAttributes[i], $(textareaSelector).css(copyAttributes[i]));
    }
    textareaClone.html('&nbsp;');
    var heightPerRow = textareaClone.height();
    textareaClone.html($(textareaSelector).val().replace(/\n/g, '<br />'));
    var overallHeight = textareaClone.height();
    $(textareaSelector).attr('rows', Math.round(overallHeight / heightPerRow));
    $(textareaSelector).css('height', 'auto');
    textareaClone.html($(textareaSelector).val().replace(/\n/g, '<br />') + '&nbsp;');
    var cursorPosition = textareaClone.height() - heightPerRow;
    textareaClone.remove();
    var jspAPI = $(textareaSelector).parent().parent().parent();
    var scrollpaneY = jspAPI.data('jsp').getContentPositionY();
    var scrollpaneHeight = $(textareaSelector).parent().parent().parent().height();
    jspAPI.data('jsp').reinitialise(settings);
    if ((cursorPosition + heightPerRow) >= (scrollpaneY + scrollpaneHeight)) {
        jspAPI.data('jsp').scrollToY(scrollpaneY + cursorPosition + heightPerRow - scrollpaneHeight);
    }
    if (cursorPosition <= scrollpaneY) {
        jspAPI.data('jsp').scrollToY(cursorPosition);
    }
}

function jScrollPaneTextArea(textareaSelector, settings) {
    var width = $(textareaSelector).outerWidth();
    var height = $(textareaSelector).outerHeight();
    $(textareaSelector).wrap('<div />');
    $(textareaSelector).parent().css('height', height).css('width', width).css('overflow', 'auto');
    $(textareaSelector).parent().jScrollPane(settings);
    $(textareaSelector).bind('keyup', function() {
        updatejScrollPaneTextArea(textareaSelector, settings);
    });
    $(textareaSelector).bind('click', function() {
        updatejScrollPaneTextArea(textareaSelector, settings);
    });
    updatejScrollPaneTextArea(textareaSelector, settings);
}

 

分享到:
评论

相关推荐

    Scroll Bar MFC控件 使用范例

    本示例主要关注如何在MFC应用中使用Scroll Bar控件,这对于创建可滚动的窗口或对话框至关重要。Scroll Bar控件允许用户通过点击或拖动滑块来浏览大量数据或查看超出窗口可视区域的内容。 首先,我们需要理解Scroll ...

    unity自制scroll view面板,scroll bar 可一拖动drag

    在“unity自制scroll view面板,scroll bar可一拖动drag”这个项目中,开发者创建了一个自定义的Scroll View组件,并实现了拖放(drag)功能,使得用户可以通过直接拖动scroll bar来滚动内容。这大大提高了用户体验...

    jquery 自定义scroll bar

    本教程将围绕“jQuery 自定义scroll bar”这一主题,探讨如何利用jQuery和相关的插件来创建独特、美观的滚动条。 首先,我们需要了解jQuery,这是一个强大的JavaScript库,简化了JavaScript的许多操作,包括DOM操作...

    FastScrollBar:Android快速滚动条,配合listview使用

    如何使用在您的项目中导入 FastScrollBar.java。 例如,将其添加到您的布局中&lt; FrameLayout xmlns : android = " ...

    小程序scroll-view与css左右滑动超出部分背景颜色不显示的解决方法

    总之,解决`scroll-view`与CSS左右滑动超出部分背景颜色不显示的问题,需要对小程序的渲染机制、CSS布局以及滚动条样式有深入的理解。通过细致的排查和合理的代码编写,可以确保用户在滑动浏览时获得良好的视觉体验...

    Smart-scroll-bar.rar_scroll_scroll bar

    在IT领域,滚动条是用户界面(UI)设计中不可或缺的一部分,它允许用户在内容超出屏幕范围时浏览和导航。本教程将深入讲解如何使用Visual C++创建一个智能滚动条程序,通过源代码分析和调试运行,我们可以学习到C++...

    Scroll Bar闪动

    在计算机用户界面设计中,滚动条(Scroll Bar)是一个至关重要的元素,它允许用户查看超过屏幕范围的内容。当“Scroll Bar闪动”时,通常意味着滚动条在不断自动刷新或出现异常行为,这可能是由于软件错误、系统设置...

    QScrollArea加载图片

    QScrollArea *scrollArea = new QScrollArea(this); QLabel *imageLabel = new QLabel(this); scrollArea-&gt;setWidget(imageLabel); ``` 2. **加载图片** 使用QLabel的setPixmap()函数加载图片。图片应为QImage...

    MFC_Scroll bar.rar_MFC_amountjrj_scroll

    本压缩包“MFC_Scroll bar.rar_MFC_amountjrj_scroll”主要关注的是MFC中的滚动条控件的实现。 滚动条是Windows GUI应用中常见的组件,用于浏览和控制大体积数据或视图的移动。在MFC中,滚动条控件主要通过...

    浮动效果滚动条的ScrollArea

    在本文中,我们将深入探讨如何实现一个具有浮动效果的滚动条的`ScrollArea`,这在QT编程中是一个常见的需求。`QScrollArea`是QT库中的一个关键组件,它提供了一个可滚动的区域,可以包含任何QWidget子类的对象。在...

    绿色滚动条 - 纯CSS3(来自ZIG)「Green Scroll Bar - Pure CSS3 (from ZIG)」-crx插件

    纯粹的CSS3,没有JS。简单而可爱!刚刚从ZIG(zzllrr Imager Geek)中提取出来http://goo.gl/n8SMk 刚刚从zzllrr Imager中提取的一个简单的Chrome滚动条。 *绿色可爱! *纯CSS3,没有JS(JavaScript)! *在网页,...

    cool scroll bar-crx插件

    【标题】:“cool scroll bar-crx插件”是一款专为谷歌浏览器设计的扩展程序,它的主要功能是将具有独特风格的Google Plus滚动条应用于所有访问的网站,为用户带来更酷炫、个性化的浏览体验。 【描述】:该插件以...

    ScrollArea.rar

    在这个"ScrollArea.rar"的示例中,可能包含了创建这样一个`QScrollArea`实例的代码,包括添加控件、设置滚动条策略以及可能的其他自定义设置。通过解压并查看源代码,你可以更深入地学习如何在实际项目中应用这些...

    QScrollArea实现可按住滑动的效果

    scrollArea-&gt;setWidget(customWidget); // 设置布局或添加其他部件到customWidget ``` 此外,如果希望滑动更加平滑,可以使用QAbstractSlider的`setSingleStep`方法来设置滚动条的步长,使其更符合用户的滑动习惯。...

    css3scroll_HTML5_CSS3源码_

    1. **Smooth Scrolling**: CSS3的`scroll-behavior`属性可以实现平滑滚动效果,让用户在浏览长页面时感受到更加流畅的体验。 2. **Position Sticky**: 这个特性允许元素在滚动到特定位置时“粘”在屏幕上,例如常见...

    pyqt 实现为长内容添加滑轮 scrollArea

    之前一直以为要添加Scroll Bar,但是不知道怎么把bar和内容关联到一起(有了解的朋友希望给我留言),后来发现可以用Scroll Area实现这一功能。 步骤一: 拖出这样一个Scroll Area 在Object Inspector里头是这样的...

    cube-scroll-nav 单页面滑动

    3. **CSS3 3D变换**:cube-scroll-nav的核心在于利用CSS3的3D转换效果,创建出一种立体的滚动效果。通过设置transform属性,可以实现元素的旋转、位移等效果,使得导航栏在滚动时有动态的视觉反馈。 4. **响应式...

    ZIG Scroll Bar (Green Wider Version)-crx插件

    纯css3绿色滚动条。 简单又可爱! 来自Zig(Zzllrr Imager Geek)http://go.gl/n8smk。 您可以为更多版本 格林滚动条捐赠Zig。 Pure CSS3,NO JS。 简单而可爱! 刚从Zig提取(Zzllrr Imager Geek)...

    Android CustomList Scroll Refresh.rar

    Android CustomList Scroll Refresh

    scroll 最基本例子

    在本文中,我们将深入探讨`scroll`的基本概念及其在编程中的应用,特别是在创建滚动效果时。标题"scroll最基本例子"暗示我们将关注`scroll`的最基础用法,而描述"scroll最基本的例子,没有其他的杂质"则表明我们将...

Global site tag (gtag.js) - Google Analytics