HTML Scroll Box

ສ້າງປ່ອງທີ່ມີຂໍ້ຄວາມເລື່ອນການນໍາໃຊ້ CSS ແລະ HTML

ກ່ອງເລື່ອນ HTML ເປັນກ່ອງທີ່ເພີ່ມແຖບເລື່ອນໄປດ້ານຂວາແລະດ້ານລຸ່ມເມື່ອເນື້ອຫາຂອງກ່ອງມີຂະຫນາດໃຫຍ່ກວ່າຂະຫນາດກ່ອງ. ໃນຄໍາສັບຕ່າງໆອື່ນ, ຖ້າທ່ານມີປ່ອງທີ່ສາມາດປະມານ 50 ຄໍາ, ແລະທ່ານມີຂໍ້ຄວາມ 200 ຄໍາ, ກ່ອງເລື່ອນ HTML ຈະເຮັດໃຫ້ແຖບເລື່ອນຂຶ້ນເພື່ອໃຫ້ທ່ານເຫັນຕື່ມ 150 ຄໍາ. ໃນ HTML ມາດຕະຖານທີ່ພຽງແຕ່ຈະສົ່ງຂໍ້ຄວາມພິເສດນອກກ່ອງ.

ການເຮັດໃຫ້ເລື່ອນ HTML ແມ່ນງ່າຍດາຍ. ທ່ານພຽງແຕ່ຕ້ອງການກໍານົດ width ແລະ height ຂອງອົງປະກອບທີ່ທ່ານຕ້ອງການເລື່ອນແລະຫຼັງຈາກນັ້ນໃຊ້ຄຸນສົມບັດ overflow CSS ເພື່ອກໍານົດວິທີທີ່ທ່ານຕ້ອງການການເລື່ອນພາບ.

ສິ່ງທີ່ຕ້ອງເຮັດດ້ວຍຂໍ້ຄວາມເພີ່ມເຕີມ?

ໃນເວລາທີ່ທ່ານມີຂໍ້ຄວາມຫຼາຍກວ່າທີ່ຈະເຫມາະໃນພື້ນທີ່ໃນຮູບແບບຂອງທ່ານ, ທ່ານມີທາງເລືອກຫຼາຍຢ່າງ:

ຕົວເລືອກທີ່ດີທີ່ສຸດແມ່ນຕົວເລືອກສຸດທ້າຍ: ສ້າງກ່ອງຂໍ້ຄວາມເລື່ອນ. ຫຼັງຈາກນັ້ນ, ຂໍ້ຄວາມເພີ່ມເຕີມຍັງສາມາດອ່ານ, ແຕ່ວ່າການອອກແບບຂອງທ່ານບໍ່ໄດ້ຮັບການຫຼຸດຫນ້ອຍລົງ.

HTML ແລະ CSS ສໍາລັບການນີ້ຈະເປັນ:

ຂໍ້ຄວາມນີ້

overflow: auto ບອກຕົວທ່ອງເວັບເພື່ອເພີ່ມແຖບເລື່ອນຖ້າພວກເຂົາຈໍາເປັນຕ້ອງເກັບຂໍ້ຄວາມຈາກການຂຸ້ນຂື້ນຂອງຂອບເຂດຂອງ div. ແຕ່ເພື່ອໃຫ້ການເຮັດວຽກນີ້, ທ່ານຍັງຕ້ອງການຄຸນສົມບັດແບບກວ້າງແລະຄວາມສູງທີ່ກໍານົດໄວ້ໃນ div, ດັ່ງນັ້ນມີຂໍ້ຈໍາກັດໃນການ overflow.

ນອກນັ້ນທ່ານຍັງສາມາດຕັດຂໍ້ຄວາມໂດຍການປ່ຽນແປງ overflow: auto; to overflow: hidden ຖ້າທ່ານປະຖິ້ມຊັບສົມບັດທີ່ເກີນຄວາມກົດດັນ, ຂໍ້ຄວາມຈະຂື້ນເຫນືອຂອບເຂດຂອງ div.

ທ່ານສາມາດເພີ່ມແຖບເລື່ອນໄປຫຼາຍກວ່າພຽງແຕ່ຂໍ້ຄວາມ

ຖ້າທ່ານມີຮູບພາບຂະຫນາດໃຫຍ່ທີ່ທ່ານຕ້ອງການສະແດງຢູ່ໃນພື້ນທີ່ຂະຫນາດນ້ອຍກວ່າ, ທ່ານສາມາດເພີ່ມແຖບເລື່ອນຮອບມັນຕາມວິທີດຽວກັນກັບຂໍ້ຄວາມ.

< / p>

ໃນຕົວຢ່າງນີ້, ຮູບພາບ 400x509 ແມ່ນຢູ່ໃນແຖວ 300x300.

ຕາຕະລາງສາມາດຊ່ວຍໄດ້ຈາກແຖບເລື່ອນ

ຕາຕະລາງຍາວຂອງຂໍ້ມູນສາມາດມີຄວາມຫຍຸ້ງຍາກໃນການອ່ານຢ່າງໄວວາແຕ່ໂດຍການວາງພວກມັນພາຍໃນຂະຫນາດຂອງຂະຫນາດທີ່ຈໍາກັດແລະຫຼັງຈາກນັ້ນເພີ່ມຄຸນສົມບັດການ Overflow, ທ່ານສາມາດສ້າງຕາຕະລາງທີ່ມີຂໍ້ມູນຫຼາຍທີ່ບໍ່ໃຊ້ພື້ນທີ່ທີ່ສຸດໃນຫນ້າຂອງທ່ານ ທີ່ຢູ່

ວິທີທີ່ງ່າຍທີ່ສຸດແມ່ນຄືກັບຮູບພາບແລະຂໍ້ຄວາມ, ພຽງແຕ່ເພີ່ມທະວີຕະຮອບຕາຕະລາງ, ກໍານົດ width ແລະ height ຂອງ div ທີ່, ແລະເພີ່ມຊັບສົມບັດ overflow:

ຊື່ ໂທລະສັບ

ສິ່ງຫນຶ່ງທີ່ເກີດຂື້ນໃນເວລາທີ່ທ່ານເຮັດນີ້ແມ່ນແຖບເລື່ອນຕາມລວງນອນຕາມປົກກະຕິແລ້ວປາກົດຂື້ນເພາະວ່າຕົວທ່ອງເວັບຄາດວ່າ chrome ຂອງແຖບເລື່ອນແມ່ນເລີ້ມຕາຕະລາງ. ມີຫລາຍວິທີແກ້ໄຂນີ້ຈາກການປ່ຽນແປງຄວາມກວ້າງຂອງຕາຕະລາງແລະອື່ນໆ. ແຕ່ favorite ຂອງຂ້ອຍແມ່ນພຽງແຕ່ຈະປິດການເລື່ອນຕາມລວງນອນດ້ວຍ CSS overflow-x. ພຽງແຕ່ຕື່ມ overflow -x: ເຊື່ອງໄວ້; ກັບ div, ແລະທີ່ຈະເອົາແຖບເລື່ອນຕາມແນວນອນ. ໃຫ້ແນ່ໃຈວ່າການທົດສອບນີ້, ຍ້ອນວ່າມັນອາດຈະມີເນື້ອຫາທີ່ຫາຍໄປ.

Firefox ສະຫນັບສະຫນູນການນໍາໃຊ້ແທັບ TBODY ສໍາລັບ Overflow

ຫນຶ່ງໃນລັກສະນະທີ່ສວຍງາມຂອງຕົວທ່ອງເວັບຂອງ Firefox ແມ່ນວ່າທ່ານສາມາດໃຊ້ຄຸນສົມບັດການ overflow ໃນແທັບຕາພາຍໃນເຊັ່ນ tbody ແລະ thead ຫຼື tfoot. ນີ້ຫມາຍຄວາມວ່າທ່ານສາມາດກໍານົດແຖບເລື່ອນເທິງເນື້ອໃນຕາຕະລາງ, ແລະຈຸລັງຫົວຫນ້າຢູ່ຂ້າງເທິງພວກມັນ. ນີ້ພຽງແຕ່ເຮັດວຽກໃນ Firefox , ເຊິ່ງເປັນສິ່ງທີ່ບໍ່ດີ, ແຕ່ວ່າມັນເປັນສິ່ງທີ່ດີຖ້າຜູ້ອ່ານຂອງທ່ານໃຊ້ Firefox ເທົ່ານັ້ນ. ເບິ່ງຕົວຢ່າງນີ້ໃນ Firefox ເພື່ອເບິ່ງສິ່ງທີ່ຂ້ອຍຫມາຍຄວາມວ່າ.