Прокрутка без полосы прокрутки
Образец формы:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
* {font:13px arial; color:white;}
body {background:black;}
label {display:inline-block; width:50px;}
input, textarea {margin:0; border:1px solid red; padding:0; background:green;}
textarea {width:300px; height:100px;}
</style>
</head>
<body>
<form action="#">
<div><label for="entry_0">Name</label><input type="text" id="entry_0"></div>
<div><label for="entry_1">Email</label><input type="text" id="entry_1"></div>
<div><label for="entry_2">URL</label><input type="text" id="entry_2"></div>
<div id="parent"><textarea id="entry_3"></textarea></div>
<div><input type="submit" value="Submit"></div>
</form>
</body>
</html>
Я хочу удалить / скрыть полосу прокрутки текстовой области, так как она не соответствует моему стилю формы. Я знаю, что могу использовать плагины jQuery для стилизации полосы прокрутки, но они не работают надежно в разных браузерах / системах. Чтобы скрыть полосу прокрутки я могу использоватьtextarea {width:300px; height:100px; overflow:hidden;}, но это полностью останавливает прокрутку Firefox через мышь и клавиатуру. Я также попробовал следующий обходной путь:
#parent {width:284px; height:102px; overflow:hidden;}
textarea {width:300px; height:100px; overflow-x:hidden; overflow-y:scroll;}
Это должно работать точно, если я добавлю какой-нибудь скрипт для вычисления ширины родительского деления:
var textareaWidth = document.getElementById('entry_3').scrollWidth;
document.getElementById('parent').style.width = textareaWidth + 'px';
Но в любом случае описанный выше подход не работает в Chrome / Safari.
Демо-версия:http://jsfiddle.net/RainLover/snTaP/
Откройте приведенную выше демонстрацию в Chrome / Safari >> вставьте текст в текстовую область >> выделите / выберите строку и перетащите указатель мыши вправо, и вы увидите полосу прокрутки. Или используйте клавиши клавиатурыPage Up а такжеPage Down.
Есть исправления или другие решения?