Показать сообщение отдельно
  #31 (permalink)  
Старый 01.05.2022, 11:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,178

Vaska,
так попробуйте
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
                header {
                        background: cyan;
                        min-height: 100px;
                }

                .content_container {

                        background: rgba(255, 0, 0, 0.3);
                        padding: 20px;

                }

                .inner-content {
                        height: 400px;
                        margin: 5px;
                        background: red;
                        overflow:  scroll;
                }

                footer {
                        background: cyan;
                        min-height: 500px;
                }
    </style>
    <title></title>
</head>
<body>
    <header>
        <div>
            other content
        </div>
        <p>text two</p>
    </header>
    <div id="haupt">
        <div id="acidhaupt" class="haupt-wrap background-color">
            <div class="content_container">
                <div id="content_a" class="inner-content" data-url="/first.html"></div>
                <div id="content_b" class="inner-content" data-url="/second.html"></div>
                <div id="content_c" class="inner-content" data-url="/third.html"></div>
                <div id="content_d" class="inner-content" data-url="/fourth.html"></div>
            </div>
        </div>
    </div>
    <footer>
        <p>footer content</p>
    </footer>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
                document.addEventListener('DOMContentLoaded', function() {
                        const lazyShow = divs => {
                                divs.forEach(e => {
                                        if (e.intersectionRatio < .3) return;
                                        let div = e.target,
                                                url = div.dataset.url;
                                    if(url.indexOf('/home/Goods/consulting.html') !== -1)
                                    $(div).load("/home/Goods/consulting.html?goods_id=2&store_id=1", function(){
                                        // Membership card
                                        $(div).find('[dstype="mcard"]').membershipCard({type:'shop'});
                                    });
                                    else $(div).load(url);
                                        observer.unobserve(div);
                                });
                        };
                        let observer = new IntersectionObserver(lazyShow, {
                                rootMargin: "10px",
                                threshold: [.3]
                        });
                        document.querySelectorAll('.inner-content').forEach(div => observer.observe(div))

                });
    </script>
</body>
</html>
Ответить с цитированием