Scrollen Sie ohne Bildlaufleiste
Beispielformular:
<!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>
Ich möchte die Textfeld-Bildlaufleiste entfernen / ausblenden, da sie nicht meinem Formularstil entspricht. Ich weiß, dass ich jQuery-Plugins verwenden kann, um die Bildlaufleiste zu formatieren, aber sie funktionieren nicht zuverlässig in verschiedenen Browsern / Systemen. Zum Ausblenden der Bildlaufleiste kann ich verwendentextarea {width:300px; height:100px; overflow:hidden;}Firefox wird jedoch nicht mehr durch Maus und Tastatur gescrollt. Ich habe auch die folgende Problemumgehung versucht:
#parent {width:284px; height:102px; overflow:hidden;}
textarea {width:300px; height:100px; overflow-x:hidden; overflow-y:scroll;}
Es sollte genau funktionieren, wenn ich ein Skript zur Berechnung der Breite der übergeordneten Unterteilung hinzufüge:
var textareaWidth = document.getElementById('entry_3').scrollWidth;
document.getElementById('parent').style.width = textareaWidth + 'px';
Der oben beschriebene Ansatz scheint jedoch in Chrome / Safari nicht zu funktionieren.
Demo:http://jsfiddle.net/RainLover/snTaP/
Öffnen Sie die obige Demo in Chrome / Safari. >> Fügen Sie Text in das Textfeld ein. >> Markieren / wählen Sie eine Linie und ziehen Sie die Maus nach rechts. Die Bildlaufleiste wird angezeigt. Oder verwenden Sie die TastaturtastenPage Up undPage Down.
Irgendwelche Korrekturen oder andere Lösungen?