不带滚动条滚动答案

【问题标题】：Scroll without a scrollbar不带滚动条滚动
【发布时间】：2012-12-06 21:11:50
【问题描述】：

示例表格：

<!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>

我想删除/隐藏 textarea 滚动条，因为它与我的表单样式不匹配。我知道我可以使用 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。

有任何更正或其他解决方案吗？

【问题讨论】：

与问题无关，但在您的示例代码中，您应该将这些样式 (font:13px arial; color:white;) 放在 body 而不是 * 上。它们将“级联”下降，而不会影响使用 * 的性能
那么文本字段不会继承正文样式。
奇怪，我不知道。尽管如此，您可能不应该使用* 并使用body, input, textarea {...} 或类似的东西
你应该声明你的文档类型，这样会导致问题。
正确答案见stackoverflow.com/questions/5820304/…。

标签： javascript css textarea scrollbar overflow

【解决方案1】：

Hacky 但似乎可以工作......

使用::after伪元素

#parent {width:302px; overflow:hidden; position: relative;}
textarea {width:300px; height:100px; overflow-x:hidden; overflow-y:scroll;}
textarea:focus {
    outline-offset: 0;
    outline-style: none;
}

#parent::after {
    position: absolute;
    width: 17px;
    top: 0;
    right: 0px;
    height: 102px;
    border-left:1px solid red;
    background-color: black;
    content: "";
    display: block;   
}

http://jsfiddle.net/tarabyte/snTaP/3/

或使用额外的 div

HTML：

<div id="parent">
  <textarea id="entry_3"></textarea>
  <div id="hidescroll"></div>
</div>

CSS：

#parent {width:302px; overflow:hidden; position: relative;}
textarea {width:300px; height:100px; overflow-x:hidden; overflow-y:scroll;}
textarea:focus {
    outline-offset: 0;
    outline-style: none;
}
#hidescroll {
    position: absolute;
    width: 17px;
    top: 0;
    right: 0;
    z-index: 1000;
    height: 102px;
    border-left:1px solid red;
    background-color: black;
}

http://jsfiddle.net/tarabyte/snTaP/2/

【讨论】：

感谢您的回答！但在我的真实形式中，我有一个背景图像，而不是黑色。有什么想法吗？
当然！给你：Sample demo with background image
好吧，只需使用相同的背景图像并将其与背景位置对齐。 jsfiddle.net/tarabyte/snTaP/10background-position: -283px -53px;.
完美！谢谢！只有一件事我想不通：你是如何计算 background-position 值的，我如何检查 console.log？
打印屏幕+图像编辑器。 :) 要在 Chrome、IE9+、FF（安装了 Firebug）中检查 console.log：按 F12，打开“控制台”选项卡。