Нее это я учел уже, я в JS размер окна проверяю бреакпоинтами только пока что мне нужно просто выбрать 4 элемента в ряду исходя из индекса
обычная математика
Sergey
Sergey
распиши на бумаге
darkc0der
распиши на бумаге
Во думал тоже на бумаге попробовать голова лучше работает так 😅) ладо попробую
Roman
User
всем привет. может кто нибудь фиксил скролл на ipone. Без position: fixed
🦜
Sergey
всем привет. может кто нибудь фиксил скролл на ipone. Без position: fixed
без подробностей ничего непонятно
Ilya
всем привет. может кто нибудь фиксил скролл на ipone. Без position: fixed
А что не так со скоролом?
User
без подробностей ничего непонятно
Есть блок который скролится. по верх него отрываем модалку. И блок который под модалкой скролиться. Это баг ios
arthur
всем привет. может кто нибудь фиксил скролл на ipone. Без position: fixed
Может быть лок скролла боди ты имел ввиду?
Ivan
Sergey
arthur
Ilya
Есть блок который скролится. по верх него отрываем модалку. И блок который под модалкой скролиться. Это баг ios
без fixed вроде не фиксится
User
с чего ты взял что баг?
https://medium.com/react-camp/how-to-fight-the-body-scroll-2b00267b37ac
Sergey
поверх всего документа необходимо открывать элемент накрывающий
User
без fixed вроде не фиксится
Тогда если при прокрутке сраницы. Сверху поле для ввода урла уменьшается в при фиксе увеличивается. И виден скачак
User
поверх всего документа необходимо открывать элемент накрывающий
а как его отрыть поверх body? )
Евгений
Подскажите как замокать вызов роутера в jest хочу проверить клик на элемент а тест падает с Error: Uncaught [Error: No router instance found.
You should only use "next/router" inside the client side of your app.
]
вот тест```
it('Тестирование нажатия на кнопку и вызов функции handleBackClick', () => {
const props = {registration : {
emailToRecover: "test@email.ru"
},systemInformation : {}
}
const output = mount(
<PasswordRecoverySuccess {...props } />
)
const handleBackClick = jest.fn
output.find('.payment-button').simulate('click')
expect(handleBackClick.mock.calls.length).toEqual(1);
})```
Bogdan
есть ли смысл делать компонент, который внутри разрулит что рендерить? тоесть передать ему условие, которое он прочекает и исходя из него нарисует? или проще прям в компоненте тернаркой?
Sergey
Все остальное это бред
Sergey
Ибо события проваливаются до документа
User
Position fixed
Если делать через fixed. То если был скрол блока. Свреху в safari уменьшается поле для ввода урл. И когда ставим fixed поле увеличивается и виден скачок
User
Ибо события проваливаются до документа
Даже если мы hidden вешаем? Это вы считаете нормальное повденени?
Bogdan
Даже если мы hidden вешаем? Это вы считаете нормальное повденени?
всегда вешаю хидден на боди при открытой модалке, если модалка открыта и ты можешь сролить это такое себе
Ilya
Если делать через fixed. То если был скрол блока. Свреху в safari уменьшается поле для ввода урл. И когда ставим fixed поле увеличивается и виден скачок
статью прочитайте, что выше скинули. Там все расписано
User
всегда вешаю хидден на боди при открытой модалке, если модалка открыта и ты можешь сролить это такое себе
Дак в том и проблема. Что в ios вешаешь hidden а блок скролиться)
Bogdan
Дак в том и проблема. Что в ios вешаешь hidden а блок скролиться)
а мы как то решали на старой работе, не скажу точно, но можно решить
Ilya
https://medium.com/react-camp/how-to-fight-the-body-scroll-2b00267b37ac
по-моему только на раскрыт момент что скролл страницы будет сбрасываться, не?
User
статью прочитайте, что выше скинули. Там все расписано
я ее уже изучил досконально. То что там написанно не подходит. Причина в урл свреху в safari
arthur
Дак в том и проблема. Что в ios вешаешь hidden а блок скролиться)
import { useLayoutEffect } from 'react';
const preventDefault = e => e.preventDefault();
export const useLockBodyScroll = () => {
useLayoutEffect(() => {
document.body.addEventListener('touchmove', preventDefault, { passive: false }); // ебаный Safari на iOS
document.body.style.overflow = 'hidden';
document.body.style.position = 'relative';
return () => {
document.body.removeEventListener('touchmove', preventDefault, { passive: false }); // ебаный Safari на iOS
document.body.style.overflow = 'visible';
document.body.style.position = 'unset';
};
}, []);
}; попробуй это, у меня работало
Sergey
Даже если мы hidden вешаем? Это вы считаете нормальное повденени?
Visibility не меняет ничего относительно событии.
Sergey
Это нормально
Daniil
@desych79 читайте описание чата
User
import { useLayoutEffect } from 'react';
const preventDefault = e => e.preventDefault();
export const useLockBodyScroll = () => {
useLayoutEffect(() => {
document.body.addEventListener('touchmove', preventDefault, { passive: false }); // ебаный Safari на iOS
document.body.style.overflow = 'hidden';
document.body.style.position = 'relative';
return () => {
document.body.removeEventListener('touchmove', preventDefault, { passive: false }); // ебаный Safari на iOS
document.body.style.overflow = 'visible';
document.body.style.position = 'unset';
};
}, []);
}; попробуй это, у меня работало
оно работает только когда нет в модалке скролла. потому что touchmove блочит польноситью все. но спасибо за помощь
Sergey
Попытки поставить костыль из-за непонимания как работает браузер
¯\_(ツ)_/¯
User
Попытки поставить костыль из-за непонимания как работает браузер
¯\_(ツ)_/¯
а какой тут костыль? Просветите тогда почему вы считает это поведение правильным. И как тогда сделать что бы все взлетелоЮ
Sergey
а какой тут костыль? Просветите тогда почему вы считает это поведение правильным. И как тогда сделать что бы все взлетелоЮ
Покажи что именно не работает в codepen или codesandbox
Евгений
Господа может знает кто как избавить от ошибки в тесте Error: Uncaught [Error: No router instance found.
You should only use "next/router" inside the client side of your app.
]
Евгений
сам тест it('Тестирование нажатия на кнопку и вызов функции handleBackClick', () => {
const props = {registration : {
emailToRecover: "test@email.ru"
},systemInformation : {}
}
const output = mount(<PasswordRecoverySuccess {...props } />)
const handleBackClick = jest.fn
output.find('.payment-button').simulate('click')
expect(handleBackClick.mock.calls.length).toEqual(1);
})
User
Покажи что именно не работает в codepen или codesandbox
есть блок. который скролиться. при нажатии на кнопку открывается модалка с фоном. модалку можно скролить. и при кролле модалки скролиться и блок. который скролиться не должен. так как при открытии модалки на body вешаетися overflow: hidden.
User
Mikhail
есть блок. который скролиться. при нажатии на кнопку открывается модалка с фоном. модалку можно скролить. и при кролле модалки скролиться и блок. который скролиться не должен. так как при открытии модалки на body вешаетися overflow: hidden.
если ты вешаешь overflow:hidden, то документ не будет скролиться. какой именно блок у тебя скролится?
Mikhail
все
зайди в девтулсы, повесь на боди overflow hidden, попробуй поскролить
не должно скролиться
соответственно проблема в том, как ты вешаешь
Пöß d'Ivoire
также проверь не висит ли чего на html теге, или на внутренних блоках
Пöß d'Ivoire
типа overflow-y:scroll
User
Научитесь читать а потом пишите. Что это для iOS safari
User
Во-первых зачем материться. Во вторых если хотите помочь советом, то лучше прочитать сразу все вопросы, ответы а потом что то советовать
В третих сори если обидел вас
Mikhail
Во-первых зачем материться. Во вторых если хотите помочь советом, то лучше прочитать сразу все вопросы, ответы а потом что то советовать
В третих сори если обидел вас
https://toster.ru/q/336289
https://stackoverflow.com/questions/3047337/does-overflowhidden-applied-to-body-work-on-iphone-safari
User
По похожей статье комменты выше :)
Sergey
есть блок. который скролиться. при нажатии на кнопку открывается модалка с фоном. модалку можно скролить. и при кролле модалки скролиться и блок. который скролиться не должен. так как при открытии модалки на body вешаетися overflow: hidden.
Я не ясно написал? Reproduction в codepen или codesandbox.
Зачем это голословие?
User
Я не ясно написал? Reproduction в codepen или codesandbox.
Зачем это голословие?
А как вы в кодепан будет смотреть на iPhone ?)
Ilya
А можно какую нибудь ссылку почитаь, как правильно?
Ну вероятнее всего вы используете react-router для роутинга, берите его документацию и гайды
Sergey
Codesandbox аналогично
User
У вас страница будет в квадрате. А это баг в том и причина должен вочпровщотьмч на всю страницу
Sergey
У вас страница будет в квадрате. А это баг в том и причина должен вочпровщотьмч на всю страницу
Господи. Никогда не слышал про айфремы?
Sergey
Codesandbox позволяет открыть без "квадрата"
Sergey
GitHub Pages есть.
Mikhail
да полно ишьюсов про нерабочий оверфлоу хиден на айос, и там же куча цсс-хаков, чтобы заработало
Sergey
Воспроизведите проблему. Что это за баг такой, который показать нельзя
Mikhail
Воспроизведите проблему. Что это за баг такой, который показать нельзя
+
но тут проще сразу пофиксить, чем воспроизводить
да и нах в чате спрашивать про это
Sergey
да полно ишьюсов про нерабочий оверфлоу хиден на айос, и там же куча цсс-хаков, чтобы заработало
Я всегда накрываю элементом прозрачным сверху
Sergey
Ебаться ещё с прыганием контента из-за скролла и прочего. Отлавливать click outside.
Сами себе проблемы создаете
Anonymous
возможно ли какии-нибудь образом обернуть router в fullpage.js?
Mikhail
Ебаться ещё с прыганием контента из-за скролла и прочего. Отлавливать click outside.
Сами себе проблемы создаете
да, я тоже для модалок делаю оверлей, тупо див с онкликом