حرکت یک باکس در صفحه
سلام
چطوری میشه در جاوااسکریپت یه باکس رو که حرکت می دیم داخل صفحه وقتی مثلا به بالای صفحه رسید از پایین صفحه وارد بشه؟
ممنون
پاسخها
8
این تابع رو توی کدهات بنویس و توی تابع move هربار اجراش کن.
function position_checker(){
box1 = document.getElementById("box1");
box_top = (box1.offsetTop+box1.clientHeight)-10;
if (box_top<-10) {
box1.style.top = (screen.height-box1.clientHeight)+'px';
}
}فقط توجه داشته باش که این تابع فقط داره بالا رفتن رو چک می کنه. یعنی رفت بالا و از صفحه خارج شد باز میاد پایین. بر اساس این بقیه رو هم بنویس.
نوع اِوِنت مناسب برای این کار رو مشخص کنید. فکر میکنم dragstart باشه اما خودتون هم در لینک زیر میتونید رویدادهای جاوااسکریپت رو بررسی کنید:
https://www.w3schools.com/jsref/dom_obj_event.asp
بعد با استفاده از متد offsetTop در جاوااسکریپت مشخص میکنید که فاصله باکس یه اِلِمان تا بالای صفحه چقدره:
var distanceToTop = document.getElementById("boxID").offsetTop;اگر این مقدار + ارتفاع باکس کمتر از 0 بشه یعنی باکس باید از از بالا حذف بشه و از پایین صفحه نمایش داده بشه. بیشترش محاسباته.
آقای بیات @ali.bayat
این طوری نوشتم و نشد باکس رو با کیبورد حرکت میدم
if(document.getElementById("box1").offsetTop < 0 +"px"){
document.getElementById("box1").style.button = 0 + "px";
}گفتگوهای مرتبط
شاید پاسخ شما همینجا باشد
خب شما موقع حرکت دادن باکستون مقدار top اون رو چک کنید و اگر
box.top-box.height > screen.heightشد یعنی باکس شما از صفحه خارج شده و دوباره box.top رو برابر با 0 قرار بدید.
آقا من دیگه مخم نمی کشه
:))
مشکل این کد چیه که اجرا نمیشه
@dr-code.ir
@ali.bayat
if(document.getElementById("box1").style.top == screen.height + "px"){
alert("hello")برای اینکه بهتر بشه کمک کرد کدهاتون رو روی سایتی مثل https://playcode.io اجرا کن و ذخیره کن و لینکش رو بزاری بهتر میشه مشکلش رو حل کرد.
دوستان این لینکشه اگه میشه کمک کنید
می خوام وقتی به آخر صفحه می رسه از اون طرف بیاد بیرون
http://playcode.io/ppp
@farshid
برای گرفتن فاصله از div تا بالای صفحه:
document.getElementById("box").offsetTopو برای گرفتن ارتفاع div از:
document.getElementById("box").offsetHeight