Сергей, Итак, я, кажется, понял..
Можно тогда попробовать сделать так:
"шапку" ограничить по ширине.
Сайдбар и контент в отдельном блоке, у которого будет 2 колонки.
Для шапки сделать псевдоэлемент, который будет абсолютно спозиционирован относительно "шапки", у которого будет высота, равная "шапке" (100%), а ширина равная ширине вьюпорта(100vh). И z-index: -1 у псевдлоэлемента, чтобы фон был под контентом "шапки".
Сергей, и в чём проблема сделать контейнер внутри "шапки", у которого будет фиксированная максимальная ширина, и в этом контейнере располагать контент? А сама "шапка" будет на всю ширину?
Чтобы кто-то выручил и сохранил Ваши нервы, потрудитесь сначала выручить и сохранить нервы того, кто Вам поможет.
Вы же вроде должны понимать что тут не ясновидящие сидят, верно?
Примеры кода? Макет? Ссылку на песочницу? Хоть что-то...
Павел Корнилов, нууу тут конечно дело Ваше, однако, все с чего-то начинали. И Jquery хороший проводник для начинающих. Куча готовых решений, документации, всё относительно легко и быстро.
А потом через n-времени ловишь себя на том, что занимаешься оптимизацией сборки вебпака\тришейкингом\ui китом\изучаешь виртуал дом и тд и тп и думаешь.. как же я докатился до такой жизни xD
Павел Корнилов, Просто среди самоучек-новичков бытует мнение что ajax не существует без Jquery или любой другой библиотеки, предоставляющей такую функцию. И судя по тому, как автор задал вопрос - он этого как раз не понимает. Что есть ajax, а что fetch. Поэтому решил уточнить, гляди и автор начнёт понимать чуточку больше :-)
Без доступа к бэку - нет. Вы же кидаете запрос и браузер отдаёт вам ответ только когда бэк полностью скомпанует ответ и вернёт его в ваш браузер по сети.
Если бэк не отдаёт вам часть, то и взять её вам неоткуда.
HAtan, Да, вроде того. Однако, менять action у формы в зависимости от заполненности инпута - сомнительная затея. Например, если JS сломается - то всё, ничего не сработает. Да и к коду много вопросов:
querySelectorAll - а ищете элемент по id, хотя в рамках страницы id должен быть уникальным.
Опираться на индексы при навешивании событий - ненадёжная затея. Кнопки поменяются местами или ещё что и всё сломается. Вместо этого лучше использовать деллигирование. Когда событие отлавливается на родительском элементе, а в event.target уже смотрят на каком реально элементе сработало событие и выбирают соответствюущее действие. Например, опираясь на тип элемента, css класс, data-атрибут.
В цикле происходит поиск формы - работа с DOM дорогая операция. Лучше так же вынести элемент формы в переменную.
Если уж и выбираете такой метод, то вам нужно добавить обработчик submit формы. Тогда в event.target у вас будет сама форма, в которой вы можете найти значение любого нужного вам инпута, подменить у формы action и вызвать form.submit(). Никаких циклов, работы с DOM и так далее. И работать будет не только по клику на кнопку, а ещё и при нажатии на enter и так далее.
А по хорошему Вам стоило бы подумать над архитектурой.
Не менять выполняющий скрипт в action, а добавить чекбокс в форму. А на бэке уже в зависимости от значения чекбокса делаются разные действия. Никакого гемороя на фронте + независимость от работоспособности JS.
Ну так о чём я и написал. Сохранять изменения значений фильтров в урл, то есть в роуте.
Либо я не до конца понимаю о чём Вы спрашиваете.
Если у Вас форма с множественным фильтром, то разумнее отправлять форму фильтров один раз по одной единственной кнопке, которая и пропишет гет параметры в адресную строку.
А Ваш компонент распарсит параметры роута и подгрузит и отобразит соответствующие товары.
Соответственно, при обновлении страницы всё остаётся на месте, и в качестве бонуса можно копировать ссылку и отправлять другу. Страница откроется с предустановленными фильтрами.
Какой ползунок? Общая прокрутка страницы? Или прокрутка внутри select, когда отображаются опции?
Кажется мне, что Вы хотите нажимать на селект, прокручивать опции и чтобы по мере прокрутке значение в селекте менялось?
Если да, то есть 2 проблемы. 1) Если опций будет мало, то не будет прокрутки, как тогда? и 2)на нативном селекте так не выйдет.
В идеале конечно если бы Вы воссоздали ваш пример в песочнице.
P.s. зачем Вы наплодили столько обработчиков change? Сделайте один и в нём проверяйте какая опция выбрана. И ссылку на $('#polzunok-1') сохраните в переменную, чтобы не обращаться к ней каждый раз. $() - поиск в DOM`e. Это не самая производительная операция.
Предложенный lnked вариант весьма не плох.
Разве что я бы вынес option`s в отдельную переменную перед return`ом, для чистоты, а так же реакт говорит использовать вместо атрибута selected на option - атрибут defaultValue на select. В данном случае <select defaultValue='0'>
Или же использовать value вместо defaultValue, если это будет контролируемый селект в компоненте с состоянием (хуки\классовом компоненте)
В большинстве случаев, что я в стречал, такие схемые картинками и вставлялись в разметку.
Чем больше там красивостей и не прямых стрелочек, тем больше вероятность что это будет вставлено картинкой.
Если посмотреть на Ваш вопрос с так сказать "исторической" стороны, то, по факту, Вы спрашиваете:
В каких случая использовать свойство, предназначенное для разметки страницы(сеток и тд) и в каких случаях, использовать свойство для отображения элементов в виде строчно-блочных.
Можно тогда попробовать сделать так:
"шапку" ограничить по ширине.
Сайдбар и контент в отдельном блоке, у которого будет 2 колонки.
Для шапки сделать псевдоэлемент, который будет абсолютно спозиционирован относительно "шапки", у которого будет высота, равная "шапке" (100%), а ширина равная ширине вьюпорта(100vh). И z-index: -1 у псевдлоэлемента, чтобы фон был под контентом "шапки".