HTML DOM Element scrollTop

ການກໍານົດຂອງຂັ້ນຕອນຂອງ HTML DOM Element scrollTop

scrollTop ການກະຕຸ້ມຫຼືການກະທົບຂອງລັກສະນະທີ່ກວດກາຄວາມສະໝອງທາງລະຫວ່າງທີ່ຕໍ່າແມ່ນ 50 ປະກອບ:

ບໍ່ມີການອ່ານເຖິງ

scrollLeft

CSS overflow 属性

onscroll 事件

ຕົວຢ່າງ

ຕົວຢ່າງ 1

ການຄົ້ນພົບຕົວລະຄອນຂອງ "myDIV" ທາງລະຫວ່າງ 50 ປະກອບ:

const element = document.getElementById("myDIV");
let x = elmnt.scrollLeft;
let y = elmnt.scrollTop;

ບິດບາດພວກເຈົ້າຄືນ

ຕົວຢ່າງ 2

ການເຄື່ອນຄວາມຂອງ "myDIV" ທາງລະຫວ່າງ 50 ປະກອບ ທາງລະຫວ່າງຖະໜົນຊັ້ນມັນແມ່ນ 50 ປະກອບ ແລະທາງລະຫວ່າງທີ່ຕໍ່າແມ່ນ 10 ປະກອບ:

const element = document.getElementById("myDIV");
element.scrollLeft = 50;
element.scrollTop = 10;

ບິດບາດພວກເຈົ້າຄືນ

ຕົວຢ່າງ 3

ການເຄື່ອນຄວາມຂອງ "myDIV" ທາງລະຫວ່າງ 50 ປະກອບຕາມລະຫວ່າງຖະໜົນຊັ້ນມັນແມ່ນ 50 ປະກອບ ແລະທາງລະຫວ່າງທາງທີ່ຕໍ່າແມ່ນ 10 ປະກອບ:

const element = document.getElementById("myDIV");
element.scrollLeft += 50;
element.scrollTop += 10;

ບິດບາດພວກເຈົ້າຄືນ

ຕົວຢ່າງ 4

ການຫລຸດຄວາມຍາວສະແດງຂອງ <body> ທຳມະດາ 30 ພິມ ແລະ ພິມສະແດງທາງຕາມທະວີດ 10 ພິມ:

const html = document.documentElement;
html.scrollLeft += 30;
html.scrollTop += 10;

ບິດບາດພວກເຈົ້າຄືນ

ຕົວຢ່າງ 5

ການປ່ຽນຊື່ມືຂອງຊັ້ນວັດສະນະ - ຖ້າຜູ້ນຳໃຊ້ອອກມາຈາກດ້ານຫລັງຂອງໜ້າວິດີໂອ 50 ພິມ ຊັ້ນວັດສະນະ "test" ຈະຖືກເພີ່ມໃຫ້ໃນບັນຊີ (ແລະຖືກຍົກຍ້າຍຄືນເວລາຫລຸດມາ):

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("myP").className = "test";
  }
    document.getElementById("myP").className = "";
  }
}

ບິດບາດພວກເຈົ້າຄືນ

ຕົວຢ່າງ 6

ບໍ່ວ່າຜູ້ນຳໃຊ້ອອກມາຈາກດ້ານຫລັງຂອງໜ້າວິດີໂອ 350 ພິມ ອາດປ້ອນສະແດງວິດີໂອ (ການເພີ່ມ slideUp ທີ່):

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
    document.getElementById("myImg").className = "slideUp";
  }
}

ບິດບາດພວກເຈົ້າຄືນ

ວິທິວິນາການ

ການຖືກກັບຄືນ scrollTop:

element.scrollTop

ການຕັດບັນຊີ scrollTop:

element.scrollTop = pixels

ຈຳນວນທາງວັດສະນະ

ຈຳນວນ ການອະທິບາຍ
pixels

ຈຳນວນພິມສະແດງສຳຫຼັບການຫລຸດຄວາມຍາວສະແດງທາງຕາມທະວີດ.

  • ຖ້າເລກສະເພາະນັ້ນເປັນຈຳນວນລົງ ຈຳນວນຈະການຕັດເປັນ 0.
  • ຖ້າບັນຊີບໍ່ສາມາດຫລຸດຄວາມຍາວສະແດງໄດ້ ຈຳນວນຈະການຕັດເປັນ 0.
  • ຖ້າເລກສະເພາະນັ້ນຫຼາຍກວ່າຈຳນວນສູງສຸດທີ່ອະນຸຍາດຄວນໄດ້ ຈະການຕັດເລກສະເພາະນັ້ນເປັນຈຳນວນສູງສຸດ.

ການຖືກກັບຄືນ

ປະເພດ ການອະທິບາຍ
ຈຳນວນ ຈຳນວນພິມສະແດງສຳຫຼັບການຫລຸດຄວາມຍາວສະແດງທາງຕາມທະວີດ.

ບັນຊີທາງສາຍບັນຊີໄດ້ສະໜັບສະໜູນ

ທຸກບັນຊີທາງສາຍບັນຊີໄດ້ສະໜັບສະໜູນ element.scrollTop：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 支持 支持 支持 支持 支持