احسان قربانی
3 سال پیش توسط احسان قربانی مطرح شد
0 پاسخ

طراحی اسلایدری مانند صفحه اول TradingView

سلام دوستان وقتتون بخیر و خسته نباشید :)
می‌خوایم یک اسلایدر مشابه صفحه اول TradingView پیاده‌سازی کنیم که کاربر با اسکرول کردن بتونه بین دوتا اسلاید ، swipe کنه.
سه راه رو امتحان کردم که به نتیجه نرسید :
راه اول این بود که روی خود body یه eventListner بگذاریم تا بعد از اسکرول کردن به مقدار مشخصی عمل swipe رو انجام بده.
راه دوم این بود که خود اون section رو scrollable کنیم و روی اون eventListner بگذاریم تا بعد از یه مقدار مشخصی اسکرول ، عمل swipe رو انجام بده.
راه سوم این بود که روی خود section برای wheel یک eventListner بگذاریم تا بعد از یه مقدار مشخصی که wheel تکون خورد به سمت پایین ، عمل swipe انجام بشه.
مشکلی که در هر سه راه وجود داشت ، این بود که نتونستم با JS کاری کنم تا اسکرول صفحه پله بخوره ، یعنی برای اولین دفعه که به پایین اسکرول میشه ، صفحه اسکرول نخوره و سرجاش بمونه تا عمل swipe انجام بشه. راه های موجود در اینترنت رو هم امتحان کردم ، window.scrollTo(0,0) باعث میشه صفحه بعد از اسکرول خوردن بیاد بالا و باعث غیرفعال شدن اسکرول نمیشه و این باعث یه حالت Glitch گونه میشه که اصلا مطلوب نیست. تغییر دادن overflow به hidden در CSS (در راه اول و سوم) هم باعث ناپدید شدن اسکرول بار میشه و یه حالت bumping طور داره که خیلی مطلوب نیست.
اگر صرفا بتونم اسکرول رو برای یک مدتی disable کنم بدون ناپدید شدن اسکرول بار (دقیقا همون چیزی که توی TradingView هست) ، بقیه‌ی کار بسیار اسونه. منتهی در همین مورد گیر کردم :)
ممنون میشم اگر راه حلی برای رفع این مشکل به ذهنتون می‌رسه ، بهم بگید:pray:


ثبت پرسش جدید

به همدیگه کمک کنیم

به احسان قربانی کمک کنید تا مشکل خودش را حل کند؛ این‌طور می‌توانیم با هم پیشرفت کنیم.

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام