我想设置<textarea>
向右滚动条,但我不想改变它的方向,因为它里面的文本的方向也会改变。
最佳答案
这是一个 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();
});
关于jquery - 如何将文本区域滚动条设置为右侧而不改变它的方向,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28557263/