Javascript 不带滚动条的滚动_Javascript_Css_Textarea_Scrollbar_Overflow

Javascript 不带滚动条的滚动

javascript css

Javascript 不带滚动条的滚动,javascript,css,textarea,scrollbar,overflow,Javascript,Css,Textarea,Scrollbar,Overflow,样本表格： <!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

样本表格：

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

如果我添加一些脚本来计算父分区宽度，它应该能够准确工作：

var textareaWidth = document.getElementById('entry_3').scrollWidth;
document.getElementById('parent').style.width = textareaWidth + 'px';

但无论如何，上述方法在Chrome/Safari中似乎不起作用。
演示：

在Chrome/Safari中打开上面的演示>>将一些文本插入文本区域>>高亮显示/选择一行，然后将鼠标向右拖动，您将看到滚动条。或者使用键盘键

向上翻页

和

向下翻页

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

有问题，但似乎有效

使用
：：在
伪元素之后

#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;   
}

或使用附加div

HTML:

与问题无关，但在示例代码中，您应该将这些样式（

font:13px arial；color:white；

）放在

正文上，而不是*
。它们将“级联”下来，没有使用*
的性能影响，那么文本字段就不会继承主体样式。奇怪的是，我不知道这一点。尽管如此，您可能不应该使用*
和body，input，textarea{…}
或类似的东西。您应该声明您的doctype，这样会导致问题。请参阅以获得正确答案。感谢您的回答！但在我的真实形态中，我有一个背景图像，而不是黑色。有什么想法吗？当然！好了，只需使用相同的背景图像并将其与背景位置对齐即可<代码>背景位置：-283px-53px。完美！谢谢只有一件事我搞不清楚：您是如何计算背景位置的值的，以及我如何检查控制台.log？打印屏幕+图像编辑器：要在Chrome、IE9+、FF（安装了Firebug）中检查console.log：按F12，打开“控制台”选项卡。
#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;   
}

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

#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;
}