我撰寫了一個簡單的閱讀更多/閱讀更少功能（最后的來源）。它也有效。只有 Firefox 在打開隱藏文本區域后會跳轉到“閱讀更多/更少”鏈接的新位置，而不是停留在滾動條之前的位置。但是，一旦滾動條位于頂部，它就會起作用并且滾動條位置保持在頂部。如果我將滾動條稍微向下移動，然后單擊按鈕，滾動條位置會移動，我會看到文本的結尾。Chrome、Edge 和 Opera 做得很好。有什么辦法可以防止 Firefox 出現這種情況？
點擊前：
點擊后（看滾動條位置）：
<!DOCTYPE html>
<html>
<head>
<title>Readmore Test</title>
<style>
.readmore-visible {
max-height: none;
}
.readmore-hidden {
max-height: 100px;
overflow: hidden;
position: relative;
}
.readmore-hidden:before {
content:'';
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
background:linear-gradient(transparent 20px, #fff);
}
</style>
</head>
<body>
<div class="readmore-hidden" id="readmore-text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
</div>
<a href="#" class="readmore-button closed">Read more</a>
<script src="https://code.jquery.com/jquery-3.6.1.slim.min.js"></script>
<script>
jQuery('a.readmore-button').click(function(e) {
var _button_this = jQuery(this);
var _text = jQuery('#readmore-text');
e.preventDefault();
if(_button_this.hasClass('closed')) {
_text.removeClass('readmore-hidden').addClass('readmore-visible');
_button_this.removeClass('closed').addClass('open').text('Read less');
}
else {
_text.removeClass('readmore-visible').addClass('readmore-hidden');
_button_this.removeClass('open').addClass('closed').text('Read more');
}
return false;
});
</script>
<div style="height:1000px"></div>
</body>
</html>
uj5u.com熱心網友回復：
要覆寫在不同瀏覽器引擎上默認設定或未設定的特定滾動錨定，您可以執行以下操作：
...
<head>
...
<style>
body {
overflow-anchor: none;
}
...
</style>
</head>
...
在這里找到一些背景資訊
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/531739.html
上一篇：ng2-charts和chart.js錯誤0x80004005(NS_ERROR_FAILURE)computeLabelSizes僅在Firefox中