Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

android — Cách phân chia tràn-x và tràn-y

In lại Tác giả: Walker 123 更新时间：2023-11-28 12:38:30 29 4
mua khóa gpt4 Nike

我在固定大小的 div 中有一个表。如果表格溢出 div，我希望滚动条出现。我还想在向下滚动时克隆表格的标题，以便标题持久存在。我遇到的问题是我希望水平滚动条滚动克隆的标题和原始表格，而垂直滚动条仅移动原始表格。

我可以使用 javascript 克隆 header ，但我无法以某种方式设置结果样式以实现我想要的结果。下面是对 HTML/CSS 的一种尝试，假设克隆的 header 已经到位。我得到了很多额外的滚动条，据我所知这是由于 CSS 规范本身。我希望有解决方法。

HTML


    









        
            
































































                    
                Heading 1                Heading 2                Heading 3            
                                
                    Heading 1                    Heading 2                    Heading 3                
                
                    Data 1                    Data 2                    Data 3                
                
                    Data 1                    Data 2                    Data 3                
                
                    Data 1                    Data 2                    Data 3                
                
                    Data 1                    Data 2                    Data 3                
                
                    Data 1                    Data 2                    Data 3                
                
                    Data 1                    Data 2                    Data 3                
                
                    Data 1                    Data 2                    Data 3                
                
                    Data 1                    Data 2                    Data 3                
                
                    Data 1                    Data 2                    Data 3                
                
                    Data 1                    Data 2                    Data 3                
                
                    Data 1                    Data 2                    Data 3

CSS

#thùng chứa {
    width: 10em;
    height: 10em;
    hiển thị: linh hoạt;
    hướng linh hoạt: cột;
    tràn-x: tự động;
}
#headerClone {
    flex: 0 0 auto;
}
#tableWrapper {
    flex: 1 1 auto;
    tràn-y: tự động;
}

链接到 jsfiddle

câu trả lời hay nhất

为此您可能需要 JavaScript。

Đoạn mã:

var cont= document.getElementById('container');
var head= document.getElementById('headerClone');
var wrap= document.getElementById('tableWrapper');
head.style.width= cont.clientWidth+'px';
cont.onscroll = function() {
  head.scrollLeft= this.scrollLeft;
};
#thùng chứa {
  width: 10em;
  height: 10em;
  màu nền: màu vàng;
  hiển thị: linh hoạt;
  hướng linh hoạt: cột;
  tràn: tự động;
}

#headerClone {
  flex: 0 0 auto;
  vị trí: tuyệt đối;
  tràn: ẩn;
  background: yellow;
}

#tableWrapper {
    flex: 1 1 auto;
}

    

      
        
          
            Heading 1
            Heading 2
            Heading 3
          
      
    
    

    

        
            
                
                    Heading 1
                    Heading 2
                    Heading 3
                
                
                    Data 1
                    Data 2
                    Data 3
                
                
                    Data 1
                    Data 2
                    Data 3
                
                
                    Data 1
                    Data 2
                    Data 3
                
                
                    Data 1
                    Data 2
                    Data 3
                
                
                    Data 1
                    Data 2
                    Data 3
                
                
                    Data 1
                    Data 2
                    Data 3
                
                
                    Data 1
                    Data 2
                    Data 3
                
                
                    Data 1
                    Data 2
                    Data 3
                
                
                    Data 1
                    Data 2
                    Data 3
                
                
                    Data 1
                    Data 2
                    Data 3
                
                
                    Data 1
                    Data 2
                    Data 3

我将 headerClone 移动到父 div 元素中:


  
    Heading 1Heading 2Heading 3

我将这些样式添加到 headerClone:

#headerClone {
  vị trí: tuyệt đối;
  tràn: ẩn;
  background: yellow;
}

使用 JavaScript，我将 headerClone 的宽度设置为匹配 thùng chứa 的宽度，并在 thùng chứa 上添加了一个滚动事件，这左右移动 headerClone，但不上下移动:

var cont= document.getElementById('container');
var head= document.getElementById('headerClone');
head.style.width= cont.clientWidth+'px';
cont.onscroll = function() {
  head.scrollLeft= this.scrollLeft;
};

关于javascript - 如何拆分 overflow-x 和 overflow-y，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27124801/

29 4 0
Đề xuất bài viết: jquery - 如何在除了一个部分之外的 body 上获得点击事件
Đề xuất bài viết: JavaScript 的固执
Đề xuất bài viết: javascript - 以相同的精度计算两个数字的平均值
Đề xuất bài viết: CSS3悬停过渡效果比例
Walker 123
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress