Гладкая полоса прокрутки - PullRequest
0 голосов
/ 05 июля 2018

Мои вопросы:

  1. При прокрутке вверх скраб в конце
  2. При прокрутке вниз он застрянет в конце

Может кто-нибудь помочь мне с этим? Я плохо разбираюсь в javascript, и у меня нет шансов узнать, в чем проблема. Прокрутка хороша, но эти две проблемы довольно неприятны. Попробуйте прокрутить вверх и вниз полностью, чтобы показать мои проблемы.

function Scrollbar(){
	new SmoothScroll(document,65,15) // target | speed | smooth
}

function SmoothScroll(target, speed, smooth) {
	if (target == document)
		target = (document.documentElement || document.body.parentNode || document.body) // cross browser support for document scrolling
	var moving = false
	var pos = target.scrollTop
	target.addEventListener('mousewheel', scrolled, false)
	target.addEventListener('DOMMouseScroll', scrolled, false)

	function scrolled(e) {
		e.preventDefault(); // disable default scrolling
		var delta = e.delta || e.wheelDelta;
		if (delta === undefined) {
			//we are on firefox
			delta = -e.detail;
		}
		delta = Math.max(-1, Math.min(1, delta)) // cap the delta to [-1,1] for cross browser consistency

		pos += -delta * speed
		pos = Math.max(0, Math.min(pos, target.scrollHeight - target.clientHeight + 15)) // + value from SMOOTH

		if (!moving) update()
	}

	function update() {
		moving = true
		var delta = (pos - target.scrollTop) / smooth
		target.scrollTop += delta
		if (Math.abs(delta) > 0)
			requestFrame(update)
		else
			moving = false
	}

	var requestFrame = function() { // requestAnimationFrame cross browser
		return (
			window.requestAnimationFrame ||
			window.webkitRequestAnimationFrame ||
			window.mozRequestAnimationFrame ||
			window.oRequestAnimationFrame ||
			window.msRequestAnimationFrame ||
			function(func) {
				window.setTimeout(func, 1000 / 50);
			}
		);
	}()
}
p {
  font-size: 20px;
  margin-bottom: 0px;
}
<body onload="Scrollbar()">
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</body>

РЕШИТЬ! Код ОБНОВЛЕН

  1. Добавьте + 15 в конце Math.max(0, Math.min(pos, target.scrollHeight - target.clientHeight + 15)) (15 - мое гладкое значение, вы устанавливаете свое значение из new SmoothScroll(document,65,15)
  2. Заменить Math.abs(delta) > 0.5 на Math.abs(delta) > 0
  3. Скорость = число + сглаживание (для скорости 50 с сглаживанием 15 напишите 65 в моем примере)

1 Ответ

0 голосов
/ 05 июля 2018

LOL Ваш вопрос - мое решение, потому что я пытаюсь найти способ сделать полосу прокрутки как этот сайт https://www.carbonbeauty.com/, спасибо человек

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...