Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.04.2020, 14:51
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

Скролл по странице
<style>
main{
	max-width: 480px;
	margin: 0 auto;
}
.block_text_2{
	padding: 20px;
}
.progress{
    width: 10px;
	height: 5px;
	background-color: burlywood;
	position: fixed;
}
</style>
<body>
<div class="progress"></div>
	<main>
		<section class="block_text_2">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis illo eum commodi autem maxime quae natus et quidem excepturi ea soluta, quas. Reprehenderit impedit iusto provident quo aspernatur, quia, fugit eligendi amet mollitia culpa iure officia maxime! Optio, commodi iure repellat aliquam praesentium totam, aut iste minima magni voluptates architecto at sequi laborum incidunt unde nihil consectetur qui necessitatibus nobis quod. Sint dolorem porro nulla ducimus repellendus tenetur maiores iste iusto, ad. Dignissimos perferendis expedita deleniti, quasi sapiente accusamus sunt. Animi facilis ipsum possimus cupiditate mollitia. Earum, iure impedit amet natus voluptatibus laudantium itaque. Culpa delectus voluptates deleniti voluptatem, iusto repudiandae in. Ullam itaque natus quasi eum, impedit voluptates unde qui vitae consectetur ducimus laboriosam, inventore eligendi incidunt at enim! Incidunt totam  libero, quasi expedita non molestias quo eveniet repudiandae quaerat am voluptate repudiandae explicabo nam quos distinctio dignissimos unde. t nesciunt ipsum molestias deleniti harum quibusdam quidem nulla dolores minima cum necessitatibus blanditiis nihil, nemo quo porro? Magni dignissimos ab a voluptatem aliquid inventore dicta non, sed dolore, optio saepe expedita accusamus sunt eos est aliquam ratione, nemo distinctio illo dolorum sequi eaque! Laboriosam dolores quod modi neque beatae, itaque, aperiam expedita eum, illo tempore voluptatum vero delectus dolorum quam soluta ullam natus. Quaerat illo debitis sint recusandae incidunt obcaecati, enim minus non, iste vel minima libero dignissimos molestias assumenda. Laborum consequuntur non, nihil fugit inventore ea provident, voluptate iure illum maiores magnam similique explicabo, temporibus assumenda ullam repellendus nisi, unde nam eaque facilis laudantium corporis. Magni harum, dolor, blanditiis, tempora dolorem provident quasi earum ducimus quidem quam officia aut a. Quae dignissimos similique iure ipsum, mollitia minima accusamus delectus molestias nostrum suscipit quaerat expedita blanditiis eligendi nemo, alias sed. Cupiditate autem, excepturi reiciendis eaque, saepe provident alias! Veniam est quia fugiat enim aliquid magnam cumque eveniet necessitatibus? Odio harum blanditiis amet cumque similique, nostrum animi consequatur. Tempora recusandae esse eligendi cupiditate, laboriosam similique impedit, quidem commodi odit velit inventore fugit sit? Harum aliquam recusandae temporibus. Quas aperiam, pariatur rerum praesentium corporis fugit veritatis distinctio non ea officiis perferendis placeat tempora, repudiandae delectus dolorum culpa cumque eius natus tempore, qui quia quam neque tenetur. Officia in qui dicta porro. Voluptatem quisquam sit commodi hic suscipit velit ea porro, blanditiis nemo dolorum. Ipsa iste veritatis voluptatem sunt sequi nemo libero nulla quo. A, consectetur eos sit officia, culpa, ipsam ea quod, fuga facere dolores quos distinctio id nemo dolore perspiciatis aliquid. Necessitatibus sint commodi a corrupti voluptates repellendus suscipit quisquam quas, aliquam, molestias. Voluptatibus nostrum consequuntur quis impedit iure, repellat natus libero, quae perspiciatis modi in ratione vitae dicta, non illo tempora cupiditate. Itaque atque, maiores eos consequuntur necessitatibus labore? Eius corporis dolores obcaecati quibusdam deleniti, eligendi velit fugit error quasi deserunt sint soluta quae commodi hic nobis blanditiis neque reiciendis accusamus iure aperiam debitis ducimus alias? Deserunt voluptates provident alias sapiente voluptatem architecto, sed, eveniet quae vero nihil nesciunt aut facilis ipsa molestias distinctio officiis, laudantium quas itaque id! Quae corporis, dolores. Nihil esse inventore aliquam libero quos architecto nisi explicabo maiores quia cupiditate, voluptates officia porro? Suscipit sunt delectus molestias dolor aperiam consequatur, asperiores officiis ducimus nisi perspiciatis natus modi odio, libero nulla? Omnis laborum earum quaerat praesentium incidunt at ad sunt quisquam quod, numquam veritatis cumque beatae eaque? Eveniet itaque magni, debitis rem consequuntur aperiam cupiditate porro! Architecto illum doloribus optio distinctio non fugit et consectetur accusamus labore ab debitis obcaecati inventore ipsum quod doloremque itaque nobis vel assumenda, quae corporis impedit dolorem ipsa porro! Blanditiis architecto dolorum, ut aliquam error obcaecati ipsa expedita? Quis nulla distinctio iure tempore ut odio non modi illo facilis. Sit, facilis. Ipsam officiis accusamus voluptate numquam. Reprehenderit enim aspernatur laborum ut voluptatibus soluta porro odit minima nihil delectus? Provident impedit aperiam, qui at nobis veritatis, reprehenderit ad molestias est architecto cupiditate. Dignissimos aspernatur quis repudiandae minus molestias debitis ipsa nobis aut culpa illum saepe laudantium, non repellendus, amet, odit doloribus placeat! Excepturi aperiam quisquam doloremque, possimus mollitia illo earum, quidem quibusdam maxime, repudiandae dolorum. Dignissimos ipsam voluptatibus dolor illum officiis ratione debitis, quia laborum pariatur inventore voluptatum fugiat minus cum delectus itaque, ab sit? Nisi iusto, porro tempora, odio blanditiis fugit magni dolorem nihil esse in dolore? Eos inventore assumenda, beatae ad aliquam quisquam soluta ipsam a atque, fugiat vero neque, hic unde aliquid provident, veniam tenetur modi itaque deserunt voluptatibus! Magnam ipsa fugit voluptatibus, inventore. Nam consectetur commodi illo officiis ipsum dolorem nobis obcaecati porro iste. Sunt nisi error vel maiores tempora, repellat ipsum veniam architecto deserunt dolore temporibus porro obcaecati tenetur iure eveniet facere? Consequatur cupiditate, repudiandae qui at dignissimos temporibus dolor praesentium. Culpa consectetur accusamus nobis enim quibusdam tempora et est fugit, earum quidem obcaecati repudiandae non alias itaque iure, numquam recusandae, id, corporis repellat iusto delectus. Vero veniam, nulla officia temporibus incidunt vitae earum minima beatae totam nam molestiae architecto sit omnis! At, repellat, debitis. Soluta sint, autem magni quia nam consectetur aliquid molestias, iure asperiores repellendus esse neque. Veniam, impedit, recusandae! Voluptas impedit odit laudantium magni dolorem accusamus sint rem. Eaque impedit illo obcaecati minima quisquam ex, similique deserunt suscipit sunt veritatis doloremque alias at officiis esse. A saepe adipisci blanditiis ducimus vero maxime soluta vel dolore distinctio iure doloremque ea hic doloribus, minima provident nam reiciendis molestiae itaque sapiente, nobis sequi, eum tenetur maiores, tempore. Blanditiis doloribus omnis ad, laudantium eius ut mollitia eum aliquid soluta, quos natus excepturi temporibus veniam, ipsa voluptatibus, est atque. Similique facilis saepe magni numquam provident, libero minima inventore placeat nulla, harum ab consequatur quisquam. Animi laudantium suscipit magnam. Nam officiis, hic quis, quam facilis suscipit quae amet ullam itaque dolores cupiditate quod, necessitatibus velit sequi doloribus! Corrupti quasi recusandae corporis rerum. Error dignissimos aut nisi, suscipit reprehenderit, incidunt pariatur officia perspiciatis quia, eos doloribus nesciunt illo provident. Veritatis quod itaque velit quo laudantium ratione in qui, esse totam culpa vitae recusandae, odio consectetur voluptates eveniet distinctio exercitationem quia delectus temporibus aliquid tempore quae praesentium iste. Minus optio molestias nobis consequuntur enim! Magni, saepe. Qui cum autem explicabo accusantium recusandae aperiam ipsum enim fugiat repudiandae quibusdam, saepe deleniti architecto labore unde commodi in. Maxime recusandae impedit quaerat sed eaque corporis porro! Est at recusandae ipsa, repellat quam harum mollitia labore veritatis delectus corporis ab unde saepe, commodi vel asperiores dolores eius repudiandae, dignissimos excepturi rerum earum numquam!
		</section>
	</main>
<script>
window.onscroll = function(){
let progress = document.querySelector(".progress");
let scrollTop = window.pageYOffset;

progress.style.width = scrollTop;

console.log(scrollTop);

}
</script>
</body>


Вроде все правильно сделал а значение он не подставляет
Ответить с цитированием
  #2 (permalink)  
Старый 18.04.2020, 15:10
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,707

progress.style.width = scrollTop + 'px';

P.S.
https://learn.javascript.ru/introduc...deventlistener
Цитата:
Фундаментальный недостаток описанных выше способов назначения обработчика –- невозможность повесить несколько обработчиков на одно событие.

Например, одна часть кода хочет при клике на кнопку делать её подсвеченной, а другая – выдавать сообщение.

Мы хотим назначить два обработчика для этого. Но новое DOM-свойство перезапишет предыдущее:

input.onclick = function() { alert(1); }
// ...
input.onclick = function() { alert(2); } // заменит предыдущий обработчик

Разработчики стандартов достаточно давно это поняли и предложили альтернативный способ назначения обработчиков при помощи специальных методов addEventListener и removeEventListener. Они свободны от указанного недостатка.

Последний раз редактировалось Nexus, 18.04.2020 в 15:12.
Ответить с цитированием
  #3 (permalink)  
Старый 18.04.2020, 15:16
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

Сообщение от Nexus Посмотреть сообщение
progress.style.width = scrollTop + 'px';

P.S.
https://learn.javascript.ru/introduc...deventlistener
Я очень сильно злюсь когда не знание синтаксиса меня останавливает, я логику то правильно построил а вот эти кавычки ((

И спасибо за ссылку я почитаю, но то что я задумал сделать это лишь начало, я просто учусь, хочу реализовать скрипт.
Ответить с цитированием
  #4 (permalink)  
Старый 21.04.2020, 05:18
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

Nexus,
window.addEventListener = function(){
let progress = document.querySelector(".progress");
let scrollTop = window.pageYOffset;
let heightBody = document.querySelector("body").scrollHeight;

heightBody = heightBody / 100;
heightBody = Math.round(heightBody);

progress.style.width = scrollTop + "px";

console.log(heightBody);

}

сделал addEventListener и почему то не работает
Ответить с цитированием
  #5 (permalink)  
Старый 21.04.2020, 05:28
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

И я не могу сообразить как сделать.
Мне нужно что бы при скроле вниз верхний блок
<div class="progress"></div>

заполнялся когда да скролится до самого низа он был на 100%

только с объяснением, без объяснение я нашел скрипт пробую его понять

Последний раз редактировалось Сергей Ракипов, 21.04.2020 в 07:20.
Ответить с цитированием
  #6 (permalink)  
Старый 21.04.2020, 05:50
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

Сообщение от Сергей Ракипов Посмотреть сообщение
Nexus,
window.addEventListener = function(){
let progress = document.querySelector(".progress");
let scrollTop = window.pageYOffset;
let heightBody = document.querySelector("body").scrollHeight;

heightBody = heightBody / 100;
heightBody = Math.round(heightBody);

progress.style.width = scrollTop + "px";

console.log(heightBody);

}

сделал addEventListener и почему то не работает
С эти я разобрался вот правильно же все сделал?

let test = function(){
let progress = document.querySelector(".progress");
let scrollTop = window.pageYOffset;
let heightBody = document.querySelector("body").scrollHeight;

/*heightBody = heightBody / 100;
heightBody = Math.round(heightBody);*/

progress.style.width = scrollTop + "px";

console.log(heightBody);

}

window.addEventListener('scroll', test)
Ответить с цитированием
  #7 (permalink)  
Старый 21.04.2020, 07:28
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

let updateScrollPercentage = function() { 
    let heightOfWindow = window.innerHeight;
    let contentScrolled = window.pageYOffset;
    let bodyHeight = document.body.offsetHeight;
    let percentage = document.querySelector(".percentage");
    let percentageVal = document.querySelector("#percentage-value");
	
    if(bodyHeight - contentScrolled <= heightOfWindow) {
        percentageVal.textContent = percentage.style.width = "100%"
    }
    else {
        let total = bodyHeight - heightOfWindow,
        got = contentScrolled,
        percent = parseInt((got/total) * 100)
        percentageVal.textContent = percentage.style.width = percent + "%"
    }
}
window.addEventListener('scroll', updateScrollPercentage)


Я вот переменные не все могу понять, и что такое total

Я прочитал о них но как то не понятно.
Ответить с цитированием
  #8 (permalink)  
Старый 21.04.2020, 08:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Сергей Ракипов
что такое total
максимально возможная прокрутка страницы
Ответить с цитированием
  #9 (permalink)  
Старый 21.04.2020, 09:18
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

let heightOfWindow = window.innerHeight;
...
let bodyHeight = document.body.offsetHeight;
....
let total = bodyHeight - heightOfWindow,

Значит не понятно, что такое innerHeight и offsetHeight
Я обычно делаю так
google и далее

mdn innerHeight

https://www.google.com/search?q=mdn+innerHeight

mdn offsetHeight

https://www.google.com/search?q=mdn+offsetHeight
Ответить с цитированием
  #10 (permalink)  
Старый 21.04.2020, 09:38
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

voraa,
я прочитал и поискал информацию прежде чем обратится сюда, для меня форум это последнее место, так устроено что есть люди который самоутверждаются за счет новичков и начинаю вести себя мерзко и надменно, по этому я пишу только уже когда потрачена много времени на самостоятельный поиск.

let updateScrollPercentage = function() { 
    let heightOfWindow = window.innerHeight;
    let contentScrolled = window.pageYOffset;
    let bodyHeight = document.body.offsetHeight;
    let percentage = document.querySelector(".percentage");
    let percentageVal = document.querySelector("#percentage-value");
	
    if(bodyHeight - contentScrolled <= heightOfWindow) {
        percentageVal.textContent = percentage.style.width = "100%"
    }
    else {
        let total = bodyHeight - heightOfWindow;
        let got = contentScrolled;
        let percent = parseInt((got/total) * 100);
        percentageVal.textContent = percentage.style.width = percent + "%"
    }
}
window.addEventListener('scroll', updateScrollPercentage)


Я пытаюсь понять
условия функции

берем высоту элемента вычитает проскороленые значение и если они меньше или равны видимой части окна то
из блока заменяем контент на ширину блока и присваивает 100 процентов, что это такое?

в другом случае
получаем переменную где высота элемента с вычетом видимой части окна
еще переменная которая показывает на сколько проскролено
еще переменная где я перевожу в цифры, первую перменую деленаую на вторую и умноженую на 100
и дальше строка тоже ставит меня в тупик.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плавный скролл к div после клика, но уже на другой странице Quark_ Javascript под браузер 6 25.06.2015 09:46
FancyBox переопределяет вертикальный скролл ? ilyas-> Элементы интерфейса 14 08.11.2014 16:55
Динамическое отображение контента на 2ой странице, в зависимости от выбора на 1ой Volchen0ck Events/DOM/Window 2 14.05.2014 16:01
Скролл странице в Хроме к динамически вставляемому фрейму Deff Events/DOM/Window 6 02.09.2013 22:29
Js scrollpane, постоянно виден скролл, как убрать? metaller92 jQuery 0 17.07.2013 11:23