วิธีแก้ไขโต๊ะรอบ ๆ และเลื่อนขึ้นและลงซ้ายและขวา

คำถาม:

เมื่อเร็ว ๆ นี้เมื่อฉันทำสถิติโครงการฉันพบข้อกำหนดเฉพาะโดยกำหนดให้ตารางได้รับการแก้ไขเมื่อเลื่อนขึ้นและลง เมื่อเลื่อนไปทางซ้ายและขวาตารางจะได้รับการแก้ไขในคอลัมน์แรกของตารางคอลัมน์สุดท้ายของคอลัมน์แรกของตารางจะได้รับการแก้ไข

อาจชัดเจนกว่าที่จะใส่การเรนเดอร์ก่อน:

เมื่อเลื่อนไปทางซ้ายและขวาคอลัมน์ทั้งสองจะได้รับการแก้ไขและส่วนตรงกลางของหัวและหางเลื่อนตามลำดับ

เมื่อเลื่อนขึ้นและลงศีรษะและหางจะได้รับการแก้ไขและส่วนตรงกลางของคอลัมน์แรกและคอลัมน์สุดท้ายเลื่อนตามลำดับ

แนวคิด:

หลังจากคิดมานานแล้วฉันพบว่ามันยากที่จะบรรลุหากฉันใช้โต๊ะและมีสถานที่ที่ขัดแย้งกันเมื่อเลื่อนขึ้นและลง ในที่สุดฉันเปลี่ยนใจให้ใช้เค้าโครง Div และเลียนแบบการออกแบบตารางเพื่อให้ได้เอฟเฟกต์นี้

แก้ปัญหา:

1. เค้าโครงโดยรวม: แบ่งออกเป็นสามส่วน: ส่วนบนกลางและล่างคือส่วนหัวส่วนหัวและส่วนท้าย ร่างกายเป็นของแข็ง ใช้การเลื่อนขึ้นและลง มันไม่ง่ายมากเหรอ? ฮ่าฮ่า.

2. รูปแบบส่วนหัว: แบ่งออกเป็นคอนเทนเนอร์ซ้ายขวา, ซ้าย 10% ลอยไปทางซ้าย, คอนเทนเนอร์ 80% ความกว้างลอยซ้าย, ขวา 10% ลอยไปทางซ้าย เพิ่มคอนเทนเนอร์ที่มีความกว้างจริงของคอลัมน์ข้อมูลคอลัมน์ (การวางตำแหน่งสัมพัทธ์)

3. ร่างกายส่วนท้ายและส่วนหัว

4. แกนควบคุม: สร้าง (80%) div ที่มีความกว้างเท่ากันกับคอนเทนเนอร์และวาง div ที่มีความกว้างของข้อมูลจริงเช่นเดียวกับคอลัมน์ container (เช่น id = scroll) เพื่อจำลองแถบเลื่อนซ้ายและขวา

JavaScript รหัสคัดลอกเนื้อหาไปยังคลิปบอร์ด