![]() Therefore you need to flank the above with two (identical) time-limited animations that force smooth scrolling onto the document for a certain period of time after the click. Sadly Chrome and Firefox, upon clicking an on-page anchor link, both first assign and then remove focus from the document. This will ensure that smooth scrolling is only active while the focus is within the page. Step 2: Go to address bar, and then type 'chrome://flags'. The Solution #įirst you need to move your assignment of scroll-behavior from html selector to html:focus-within. How to Enable Smooth Scrolling in Google Chrome Step 1: Open Chrome web browser. In the left-hand navigation menu, click Start, home and new tabs. Until the Chromium team fixes it, here is a trick how to solve the problem on your own with a little bit of extra CSS -and HTML-. Click the three-dot menu in the upper-right corner, and click settings. So for the page search it would be desirable for the browser to make an exception to that rule and to deactivate smooth scrolling. Even when cycling through the browser's page search results. Smooth scrolling is consequently applied to everything. Sadly, as Chris points out in his tweet, native smooth scrolling negatively affects the UX of page search when cycling through its search results: All you need to do is slap a scroll-behavior: smooth on html and all of a sudden scrolls to different places on the page happen smoothly. Chris Coyier January 5, 2021Īpparently Chris had once switched out JavaScript-based smooth anchor scrolling in favor of a more modern, purely CSS-based solution. ![]() Unfortunately, you can't control the speed or when it happens. Google Chrome will restart and open any pages that were previously open. Click Relaunch on the bottom-right corner. Click the dropdown box next to Smooth scrolling, and click Enabled. As you can see from the screenshot, I have mine set to 900 framerate, 700 animation time, and 300px step size (how many pixels it scrolls down at once). On this page, you can configure how fast the animation is and how far down the page the smooth scroll will go. It went as follows:Īnecdotal thing: when I had this on I had SO MANY reports of people annoyed that when they did "find on page" and ⬆️⬇️ through the results, the smooth scrolling was slow and annoying. Open a new tab and type chrome://flags/smooth-scrolling in the address bar, and press Enter. To set up the plugin, you will need to go to Settings > Smooth Scroll. Yesterday, as I was browsing my Twitter timeline, a tweet from Chris Coyier popped up, in which he mentioned feedback he got for one of his CSS Tricks experiments. Fixing Smooth Scrolling & Page Search (updated!) Der Scheppįixing Smooth Scrolling & Page Search (updated!)
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |