javascript - 在文本区域启用滚动

Question

我正在使用 css 类来禁用我的网络表单上的文本区域。我面临的问题是当内容超过一定限制时文本区域滚动，当我使用 css 禁用文本区域时，滚动也禁用。我只希望禁用文本区域而不是滚动。我希望仅在禁用模式下读取整个数据。

这是html代码

<div class="ast">
<div class="notEdit-overlay"></div>
<textarea id="txtBiography" class="TextArea100Per">
    Harry Potter is a series of seven fantasy novels written by the British author J. K. Rowling. The books chronicle the adventures of a wizard, Harry Potter, and his friends Ronald Weasley and Hermione Granger, all of whom are students at Hogwarts School of Witchcraft and Wizardry. The main story arc concerns Harry's quest to overcome the Dark wizard Lord Voldemort, whose aims are to become immortal, conquer the wizarding world, subjugate non-magical people, and destroy all those who stand in his way, especially Harry Potter.
Since the release of the first novel, Harry Potter and the Philosopher's Stone, on 30 June 1997, the books have gained immense popularity, critical acclaim and commercial success worldwide.[2] The series has also had some share of criticism, including concern for the increasingly dark tone. As of June 2011, the book series has sold about 450 million copies, making it the best-selling book series in history, and has been translated into 67 languages.[3][4] The last four books consecutively set records as the fastest-selling books in history.
A series of many genres, including fantasy, coming of age, and the British school story (with elements of mystery, thriller, adventure, and romance), it has many cultural meanings and references.[5][6][7][8] According to Rowling, the main theme is death.[9] There are also many other themes in the series, such as prejudice and corruption.[10]
The series was originally printed in English by two major publishers, Bloomsbury in the United Kingdom and Scholastic Press in the United States. The books have since been published by many publishers worldwide. The books, with the seventh book split into two parts, have been made into an eight-part film series by Warner Bros. Pictures, the highest-grossing film series of all time. The series also originated much tie-in merchandise, making the Harry Potter brand worth in excess of $15 billion.[11] Also, due to the success of the books and films, Harry Potter has been used for a theme park, The Wizarding World of Harry Potter in Universal Parks & Resorts' Islands of Adventure.
</textarea>
</div>

这是使用的css类

    .TextArea100Per
{
    border: none;
    font: normal 15px/16px "HelveticaNeueLTCom45Light" , Georgia,serif;
    margin: 8px 0 15px 0;
    padding: 7px 4px 8px 10px;
    color: #6d6e71;
    width: 98.6%;
    height: 225px;
}
.notEdit-overlay
{
    width: 1080px;
    height: 99%;
    left: 0px;
    background: red;
    position: absolute;
    opacity: 0;
    filter: alpha(opacity=1);
}
.ast{
    position: relative;
}

这里是一个链接 jsfiddle

Answer 1

您可以使用只读属性吗？这样就不需要覆盖:

<textarea id="txtBiography" class="TextArea100Per" readonly>
    Content
</textarea>

JSFiddle

或

如果您从未打算使文本区域可写，那么为什么要使用文本区域呢？您也可以使用带有 overflow-y:auto 的 block 元素:

JSFiddle

---

编辑:

如果你真的想使用覆盖层模拟 #txtBiography 的滚动，你可以使用这个 jQuery:

$('.notEdit-overlay').on('mousewheel', function(e){
    d = e.originalEvent.wheelDelta;
    $('#txtBiography')[0].scrollTop -= (d/2);
});

JSFiddle

当然，这将只使用鼠标滚轮，因此如果您希望能够单击它，您需要想出一种方法来调整滚动条的叠加层大小，但我会把它留给你作为您的下一个挑战。