jquery - 如何将文本区域滚动条设置为右侧而不改变它的方向

Question

我想设置<textarea>向右滚动条，但我不想改变它的方向，因为它里面的文本的方向也会改变。

Answer 1

这是一个 hack(只是为了好玩!)但是您可以隐藏默认滚动条(在左侧)并在右侧呈现自定义滚动条。

注意:10 分钟破解。不太适合生产代码。

演示:http://jsfiddle.net/dkvvqz2u/3/

代码:

var textarea = $('textarea'), 
    scroller = $('<div/>').addClass('scroller').insertAfter(textarea),
    scroll = $('<div/>').addClass('scroll').appendTo(scroller);

// function to position the scroller correctly
function placeScroller() {

    scroller.css({
        top: textarea.offset().top + 'px',
        left: (textarea.offset().left + textarea.outerWidth() - 10) + 'px',
        height: textarea.outerHeight() + 'px'
    });

    scroll.css({
        top: Math.floor(textarea.scrollTop()/textarea[0].scrollHeight * textarea.outerHeight()) + 'px',
        left: '0',
        height: Math.floor(textarea.height()/textarea[0].scrollHeight * textarea.outerHeight()) + 'px'
    });
}

// place scroller initially.
placeScroller();

// update scroller on data change
textarea.on('scroll keyup paste cut undo', placeScroller);

// make mousewheel scrollable
textarea.on('wheel', function(_e) {
    textarea.scrollTop(textarea.scrollTop() + _e.originalEvent.deltaY);
    placeScroller();
});