Tôi tìm thấy một giải pháp trong dự án của mình, bằng cách ẩn thanh cuộn ngang (tôi sử dụng thanh cuộn tùy chỉnh ui), cho vùng chứa có đệm-phải 300px và lề phải -300px. Padding và -margin làm cho nó như vậy các trẻ em bình thường được liên kết như nhau, ngoại trừ cũng có thêm phòng trong container trong trường hợp một yếu tố hoàn toàn vị trí kéo dài ra khỏi khu vực đó. (các khu vực có thể cuộn được cắt bất kỳ thứ gì ngoài ranh giới bên ngoài)
Tất nhiên, nếu bạn có nội dung ở bên phải của vùng cuộn, điều này làm cho nó mở rộng ra ngoài. Với nền trong suốt không phải là vấn đề về thị giác; tuy nhiên nó chặn các sự kiện chuột.
Để giải quyết điều đó, tôi bổ sung thêm hai yếu tố như anh chị em ruột của cuộn xem, như vậy:
// this outer container resizes to match the size of scrollContainer
<div style={{position: "relative"}>
<div id="scrollContainer" style={{paddingRight: 300, marginRight: -300}}>
// stuff which might extend to the right
</div>
// the containers below resize with the outer container
// however, notice that the 2nd one is positioned only over the possibly-extended-onto area
<div id="insideArea" style={{position: "absolute", left: 0, right: 0, top: 0, bottom: 0}}
onMouseEnter={()=> {
// we're back inside, so enable scroll-container mouse-events
$("scrollContainer").css("pointer-events", "auto");
// prevent self from blocking mouse events for scrollContainer
$("insideArea").css("display", "none");
// re-enable extend-area div, so we know when mouse moves over it
$("extendArea").css("display", "block");
}/>
<div id="extendArea" style={{position: "absolute", top: 0, bottom: 0, left: "100%", width: 300}}
onMouseEnter={()=> {
// we're over the extend-area, so disable scroll-container mouse events
$("scrollContainer").css("pointer-events", "none");
// prevent self from blocking mouse events for behind-extend-area elements
$("#extendArea").css("display", "none");
// re-enable inside-area div, so we know when mouse moves over it
$("#insideArea").css("display", "block");
}/>
không làm gì ở trên? Khi chuột di chuyển vào vùng cuộn bình thường, các sự kiện con trỏ được kích hoạt, cho phép bạn bấm vào nội dung bên trong - nhưng khi chuột di chuyển vào vùng "mở rộng" đặc biệt, các sự kiện chuột di chuyển bị vô hiệu hóa, cho phép bạn nhấp vào các mục bình thường phía sau khu vực đó.
Giải pháp này có thể sẽ không bao giờ được sử dụng bởi bất kỳ ai khác, nhưng tôi đã dành đủ thời gian để tìm kiếm nó, tôi nghĩ tôi vẫn chia sẻ nó!