Блог

Главная - Вопросы по программированию - HTML, CSS — Как сделать элемент scoll для div в другом div с помощью overflow-y: scroll;

HTML, CSS — Как сделать элемент scoll для div в другом div с помощью overflow-y: scroll;

#html #css

#HTML #css

Вопрос:

Как сделать это «a href=»#koszulki»] ПРОКРУТИТЕ ДО ‘KOSZULKI’ / a» прокрутите до div в div с overflow-y: scroll; Кто-нибудь знает, как это сделать? Я понятия не имею, как я мог это сделать. Спасибо!

 <head>
    <style type="text/css">
        body{
            overflow: hidden;
        }

        #content{
            overflow-y: scroll;
        }
    </style>
</head>
<body>
    <div id="container">
        <a href="#koszulki">SCROLL TO 'KOSZULKI'</a>
        <div id="content">
            <section id="produkty">
                <div id="koszulki">
                    <div class="produkt">
                        <!-- CONTENT !-->
                    </div>
                    <div class="produkt">
                        <!-- CONTENT !-->
                    </div>
                    <div class="produkt">
                        <!-- CONTENT !-->
                    </div>      
                </div>
                <br>
                <div id="bluzy">
                    <div class="produkt">
                        <!-- CONTENT !-->
                    </div>
                    <div class="produkt">
                        <!-- CONTENT !-->
                    </div>
                    <div class="produkt">
                        <!-- CONTENT !-->
                    </div>      
                </div>
            </section>
        </div>
    </div>
</body>

Комментарии:

1. Эй, гермес, что ты подразумеваешь под прокруткой до div, например, когда вы нажимаете на привязку тега ur, вы хотите, чтобы веб-страница прокручивалась до определенного div?

Ответ №1:

вот как перейти к div

 function scrollToDiv() {
  const bounds = document.getElementById("there").getBoundingClientRect()
  window.scrollTo(0, bounds.bottom);
}

document.getElementsByTagName("button")[0].onclick= () => scrollToDiv()  
 body {
height: 3000px;
display : flex;
flex-direction : column;
justify-content: space-between;
margin : 50px;
}

.there {

}

html {
  scroll-behavior: smooth;
}  
 <button>scroll there</button>
<div id="there">come here<div>

Комментарии:

1. Да, это вроде как то, что мне было нужно, но я не открываю окно, но Большое спасибо! У меня есть еще один вопрос, как сделать эту прокрутку анимированной или просто гладкой?