czy istnieje sposób, by div nie wychodził poza ekran strony

pytanie zadane 17 kwietnia 2019 w JavaScript przez Hasira Bywalec (2,100 p.)
edycja 17 kwietnia 2019 przez Hasira

Witam, mam taki skrypt

tutaj podgląd (tak, jest zaślepka ale na niej też działa ten ppm)

document.addEventListener('contextmenu', event => event.preventDefault());

			const menu = document.querySelector(".menu");
			let menuVisible = false;

			const toggleMenu = command => {

  				menu.style.display = command === "show" ? "block" : "none";
  				menuVisible = !menuVisible;
			};

			const setPosition = ({ top, left }) => {

  				menu.style.left = `${left}px`;
  				menu.style.top = `${top}px`;
  				toggleMenu("show");
			};

			window.addEventListener("click", e => {

  				if(menuVisible)toggleMenu("hide");
			});

			window.addEventListener("contextmenu", e => {

  				e.preventDefault();
  				const origin = {

    				left: e.pageX,
    				top: e.pageY
  				};
  				setPosition(origin);
  				return false;
			});

zamienia on podstawowe context menu przeglądarki i podmienia na moje, ale gdy kliknę ppm w prawym rogu strony, to wychodzi on poza stronę, a chciałbym by nie wychodził, by się przesuwał na tyle, by był na stronie nie zależnie od położenia (prawo, dół)

1 odpowiedź

odpowiedź 17 kwietnia 2019 przez Xevrrer Obywatel (1,640 p.)
wybrane 17 kwietnia 2019 przez Hasira

Najlepsza

Są dwie proste opcje.

Jeśli pozycja menu wraz z jego szerokością będzie większa niż szerokość okna(window), wtedy ustaw sztywno parametr x, który będzie szerokością okna z odjęciem szerokości menu, wtedy będzie zachowywał się podobnie jak ten obecny który mam w google chrome.

Druga sposób to gdy szerokość menu wraz z jego pozycją będzie większa niż szerokość okna, odwrócić aby wyświetlało się po lewej stronie kursora, nie prawej (odejmij od x szerokość menu).

komentarz 17 kwietnia 2019 przez AdamSiekierski Dyskutant (8,340 p.)

Sorry, nie doczytałem

komentarz 17 kwietnia 2019 przez Hasira Bywalec (2,100 p.)

@Xevrrer, a tak bardziej po ludzku? nie jestem mistrzem js

komentarz 17 kwietnia 2019 przez Xevrrer Obywatel (1,640 p.)

Nie trzeba być mistrzem, wystarczą podstawy ;)

const windowSizeW = window.screen.width;

/* Wartosci przykladowe */
const menuSizeW =  200; /* Pobierz sobie szerokośc menu, np. "offsetWidth" */
let posX = 700; /* Pozycja X gdzie wyskoczy okienko, w tym przypadku, prawdopodobnie pozycja X kursora */

if((menuSizeW+posX)>windowSizeW){

posX -= menuSizeW;
// przeniesie o dlugosc menu w lewą stronę (ujemny koordynant X) twoje menu.
}

komentarz 17 kwietnia 2019 przez Hasira Bywalec (2,100 p.)

wykrywa, że jest poza ekranem, ale nadal wychodzi

komentarz 17 kwietnia 2019 przez Xevrrer Obywatel (1,640 p.)

to co jest w warunku, upewnij się że ma rzeczywisty wpływ na pozycje, nie jest ograniczone przez scope, nie jest nadpisane itd.

Po prostu upewnij się że odejmuje, ponieważ po odjęciu długości X menu od pozycji, powinno go cofnąć z "lewego górnego rogu" na "prawy górny róg" kursora.