Making Horizontal Mouse Scrolling With HTML, CSS, and JavaScript

I recently came across a beautiful html5 template featuring horizontal mouse scrolling here. I’m not sure how they do it, so instead of trying to find that out, like any self-respecting coder I decided to come up with my own «better way». You can judge the results for yourself here!. Now with the inspirational story out of the way, here’s how I did it. View the sample here. First, the HTML. You’ll need an outer container element, an inner container element and then your items will go in this inner container.

HTML Code

  class="outercontainer" id=""scrl1>  class="innercontainer">  class="item">I  class="item">Used  class="item">To  class="item">Rule  class="item">The  class="item">World  class="item">Seas  class="item">Would  class="item">Rise  class="item">When  class="item">I   

Second, the CSS. The important thing to note here is if the viewport is scrollable, then by default whenever the wheel is scrolled, the page will scroll vertically. To prevent this, just make sure all content fits within the viewport vertically. Then, we make the outer container scrollable and the inner container non scrollable. We also hide the scrollbar so you can’t scroll manually unless its a touch device.

CSS Code

 .outercontainer width: 96%; background-color: black; min-height: 96vh; margin: 0 auto; overflow-x: scroll; position: relative; scrollbar-width: none; -ms-overflow-style: none; > .outercontainer::-webkit-scrollbar  display: none;> .innercontainer  width: fit-content; box-sizing: border-box; padding: 24px 48px; height: 85vh; background-color: black; display: flex; flex-flow: row; justify-content: flex-start; align-items: center; > .item  width: 269px; height: 96%; background-color: white; box-sizing: border-box; padding-top: 6.69%; margin-right: 24px; text-align: center; font-size: large; font-weight: bold; > .item:last-child margin-right: 0px; > 

Finally, the Javascript. We bundle all our functions inside window.onload to ensure our HTML is loaded before the script starts. We then assign the document’s onwheel event to our customScrollFunction. Every time the event happens (a wheel scroll), our function is called. Then we read the event’s deltaY value. If this value is negative the wheel is going down and if its positive then the wheel is going up. We use a simple if to scroll our container left or right accordingly.

JavaScript Code — Client Side

 window.onload = () =>  document.onwheel = customScrollFunction; function customScrollFunction(event) let deltaY = event.deltaY; let deltaYSign = Math.sign(deltaY); if(deltaYSign==-1) document.getElementById("scrl1").scrollBy( top: 0, left: -169, behavior: 'auto' >); >else document.getElementById("scrl1").scrollBy( top: 0, left: 169, behavior: 'auto' >); > > > 

Источник

Css smooth scrolling html on mouse scroll

The name suggests scrolling which means we can scroll the page and we are able to see how much scrolling is done, smooth scrolling is useful to that user read the long pages. You can likewise include movement page scroll utilizing jQuery animate() strategy.

Jumpy scrolling with mouse wheel on chorme (Windows)

Try scroll-behaviour rather than scrolling-behaviour . Docs for scroll-behavior. It’s probably not possible to advise much more without a link to the website.

This property only really deals with scrolling triggered via a browser API though, not with the mousewheel.

Horizontal Smooth Momentum Scrolling, The scrolling amount now depends on how much the user physically scrolls the mousewheel. /* UPDATED 2022 ANSWER */ function init() < /* *

Landing Page With Smooth Scroll

In this video we will create a simple landing page with smooth scrolling. I will show you 3 options
Duration: 22:43

MOMENTUM Scrolling with Smooth-Scrollbar.js!

https://designcourse.com — Learn UI/UX from Scratch with my new service (coming soon) — Today Duration: 12:35

Smooth scroll to div on mouse scroll

There is a good plugin for doing what you want.

Stop the smooth scroll with mouse wheel

Add event handlers to the window for wheel and mousewheel events, and in their handlers call $(«html, body»).stop()

Maybe the issue is that you are not using document ready function.

Smooth scrolling on mouse wheel?, DOMMouseScroll and e.originalEvent.detail are required for Firefox. Change amt to be your desired scroll distance, and change 500 to be your

JQuery Scroll Smooth

Definition of jQuery Scroll Smooth

JQuery provides the different types of functionality to the user, in which that scroll smooth is one of the functionalities that is provided by jQuery. Basically is a plugin and used to perform the smooth scrolling on the same page as per requirement. The name suggests scrolling which means we can scroll the page and we are able to see how much scrolling is done, smooth scrolling is useful to that user read the long pages. They can easily or we can say that smoothly scroll the page whatever they want that is a big sign of smooth scrolling as a user point of you.

What is jQuery scroll smooth?

You may have heard the term smooth looking on the web and considered what precisely is this? In case you don’t know, smooth looking, as its name demonstrates, is an element that permits you to scroll without a hitch. The standard thing/typical looking over is somewhat choppier and might stop out of nowhere.

That is the reason significant applications like Google Chrome have presented another element named smooth looking over. At the point when smooth looking over is turned on, you’ll notice that the looking over is a ton smoother and it will not stop abruptly when you quit looking over but instead look over somewhat past your looking over the point that will make the look over a great deal smoother.

The most ideal approach to portray the smooth parchment is to contrast the normal mouse scroll and the parchment when the parchment wheel is squeezed. On the off chance that you press the mouse scroll wheel, you can move your mouse up/down and the parchment will be exceptionally smooth. Empowering a smooth parchment permits you to scroll like that with your normal wheel scroll. Smooth looking over is likewise helpful with console easy routes.

At the point when this element is empowered, squeezing the Page Down button will not simply bounce straightforwardly down one page. With smooth looking over, it slides down without a hitch, so you can perceive the amount it scrolls.
This probably won’t be an immense arrangement for you yet it is nothing to joke about for clients who read a ton of long pages. The uneven parchment may be irritating for a lot of clients and that is the reason individuals are moving towards the smooth parchment alternative.

How to Create a Smooth Scrolling?

Now let’s see how we can create the smooth scrolling as follows.

We regularly utilize the # (hash) inside the href trait of the HTML anchor tag to connect to a specific segment in a website page. For instance, to look to the highest point of the current page you can utilize and to look to the lower part of the page. Clicking a connection, with the # will in a split second take you to a predefined area on the page.
Now let’s see examples of smooth scrolling for better understanding as follows.

There are multiple types of scrolling as follows.

First, let’s see how we can create the scrolling after clicking on the link by using the scrollTop() method as follows.
The scrollTop() technique in jQuery is utilized to look at a specific part of the page. Vitalizing this technique with the accessible inbuilt movements can make the parchment smoother.

The hash piece of the anchor interface is first separated utilizing the hash property and its situation on the page is discovered utilizing the offset() technique. The scrollTop() technique has then approached this hash value to look at that area. This technique is enlivened by walling it inside the offset() strategy and determining the term of the liveliness to be utilized in milliseconds. A bigger worth would make the movement slower to finish than a more modest worth. This will flawlessly energize all the anchor joins on the page when they are clicked.

Smooth Scroll to ID with jQuery

Smooth looking over utilizing jQuery gives a superior UI to the web project. Smooth parchment lessens the endeavours of the clients to look for arriving at the specific part of the page. With smooth looking over, the client can arrive at the particular piece of the page by clicking an anchor connection or button.

jQuery scrollTop technique gives a simple method to look by utilizing ID also as we can utilize div components. You can likewise include movement page scroll utilizing jQuery animate() strategy. In this instructional exercise, we will tell you the best way to execute a smooth look to div utilizing jQuery without physically scrolling.

Now let’s see how we can perform the smooth scrolling with ID as follows.

Example

JQuery Smooth Scrolling

This is the landing page of scrolling

Click on below button to scroll the top of page

Hi Welcome.

Click here to scroll the top of the page

Explanation

In the above example, we try to implement smooth scrolling for the top of the page as shown. The final result of the above program we illustrated by using the following screenshot as follows.

In the above screenshot, we show some web content as well as we show the button to scroll the page. After clicking on this button page scroll to the top.

Conclusion

We hope from this article you learn more about the JQuery smooth scroll. From the above article, we have taken in the essential idea of the jQuery scroll smooth and we also see the representation and example of jQuery scroll smooth. From this article, we learned how and when we use the jQuery scroll smoothly.

Final thoughts

This is a guide to jQuery Scroll Smooth. Here we discuss the definition, What is jQuery scroll smooth? How to Create a Smooth Scrolling? examples with code implementation. You may also have a look at the following articles to learn more –

Источник

Мышь: колёсико, событие wheel

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Колёсико мыши используется редко. Оно есть даже не у всех мышей. Поэтому существуют пользователи, которые в принципе не могут сгенерировать такое событие.

…Но, тем не менее, его использование может быть оправдано. Например, можно добавить дополнительные удобства для тех, у кого колёсико есть.

Отличия колёсика от прокрутки

Несмотря на то, что колёсико мыши обычно ассоциируется с прокруткой, это совсем разные вещи.

• При прокрутке срабатывает событие onscroll – рассмотрим его в дальнейшем. Оно произойдёт при любой прокрутке, в том числе через клавиатуру, но только на прокручиваемых элементах. Например, элемент с overflow:hidden в принципе не может сгенерировать onscroll .
• А событие wheel является чисто «мышиным». Оно генерируется над любым элементом при передвижении колеса мыши. При этом не важно, прокручиваемый он или нет. В частности, overflow:hidden никак не препятствует обработке колеса мыши.

Кроме того, событие onscroll происходит после прокрутки, а onwheel – до прокрутки, поэтому в нём можно отменить саму прокрутку (действие браузера).

Зоопарк wheel в разных браузерах

Событие wheel появилось в стандарте не так давно. Оно поддерживается Chrome 31+, IE9+, Firefox 17+.

До него браузеры обрабатывали прокрутку при помощи событий mousewheel (все кроме Firefox) и DOMMouseScroll, MozMousePixelScroll (только Firefox).

Самые важные свойства современного события и его нестандартных аналогов:

wheel Свойство deltaY – количество прокрученных пикселей по вертикали. Существуют также свойства deltaX и deltaZ для других направлений прокрутки. MozMousePixelScroll Срабатывает, начиная с Firefox 3.5, только в Firefox. Даёт возможность отменить прокрутку и получить размер в пикселях через свойство detail , ось прокрутки в свойстве axis . mousewheel Срабатывает в браузерах, которые ещё не реализовали wheel . В свойстве wheelDelta – условный «размер прокрутки», обычно равен 120 для прокрутки вверх и -120 – вниз. Он не соответствует какому-либо конкретному количеству пикселей.

Чтобы кросс-браузерно отловить прокрутку и, при необходимости, отменить её, можно использовать все эти события.

Пример, включающий поддержку IE8-:

if (elem.addEventListener) < if ('onwheel' in document) < // IE9+, FF17+, Ch31+ elem.addEventListener("wheel", onWheel); >else if ('onmousewheel' in document) < // устаревший вариант события elem.addEventListener("mousewheel", onWheel); >else < // Firefox < 17 elem.addEventListener("MozMousePixelScroll", onWheel); >> else < // IE8- elem.attachEvent("onmousewheel", onWheel); >function onWheel(e) < e = e || window.event; // wheelDelta не даёт возможность узнать количество пикселей var delta = e.deltaY || e.detail || e.wheelDelta; var info = document.getElementById('delta'); info.innerHTML = +info.innerHTML + delta; e.preventDefault ? e.preventDefault() : (e.returnValue = false); >

Источник