Вопрос: В H5 у нас есть такое требование: например, когда есть список, при прокрутке вниз нужно загрузить больше.
Решение. Вы можете использовать событие прокрутки окна для обработки.
Анализ: Если прокрутка идет на весь экран (а не на определенный блок интерфейса), то так и должно быть: высота экрана + максимальное расстояние прокрутки = высота контента.
Реализация кода:
<html> <head> <meta charset=UTF-8> <title>Слушайте прокрутку вниз. Прокрутите вниз</title> <style> .div2{width:100px;height:100px;border:1px сплошной красный }*{margin:0}.button1:active{background:red}body{высота:375 пикселей;ширина:667 пикселей;граница:1px сплошная красный}.div1{высота:600 пикселей;ширина:100%;фон:красный}.div2{высота:600 пикселей;ширина:100%;фон:зеленый}.div3{высота:600 пикселей;ширина:100%;фон:синий} .div4{высота:600 пикселей;ширина:100%;фон:желтый} </style> </head> <body> <div class=div0> <div class=div1></div> <div class=div2></div> <div class=div3></div> <div class=div4>< /div> <div class=div5></div> </div> </body> <script> window.onload = function(){ //Получаем родительский элемент контейнера var div0 = document.getElementsByClassName('div0') [ 0]; // высота Высота вычисляемого атрибута var height = parseInt((window.getComputedStyle(div0, null).height).replace('px', '')); console.log(height, рассчитанная высота div0) window.onscroll = function( ){/*scrollTop — это расстояние между верхней частью полосы прокрутки и правым верхним углом интерфейса. Здесь используется метод совместимости записи*/let ScrollTop = document.documentElement &&. document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop; //+-5 предназначен для обеспечения определенной степени гибкости, он не обязательно должен быть точно равным, if(height-5<=scrollTop+; clientHeight&&scrollTop+clientHeight< =height+5){ console.log('Прослушивание успешно', 'Достигнуто внизу') } } } </script></html> Соответствующее объяснение кода: часто при загрузке списка мы не можем установить высоту родительского контейнера, загружающего дочерние элементы. В это время, когда для стиля установлено значение auto, element.style.height также будет равен. auto Рекомендуется использовать clientHeight или использовать стиль расчета. getComputedStyle вычисляет высоту.
Подвести итог
Вышеупомянутое представляет собой то, что редактор предлагает вам для решения проблемы прокрутки до нижнего уровня в HTML5. Надеюсь, это будет вам полезно. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам. время. Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!
Если вы считаете, что эта статья вам полезна, вы можете ее перепечатать, укажите источник, спасибо!