Почему scroll-behavior:smooth не работает, а javascript window.scroll гладко работает?
У меня есть панель навигации для прокрутки вниз до элементов привязки. Навбар находится внутри тела.
На этой странице я также использую некоторые javascript. Один из них-это javascript со следующей функцией для перехода к другим элементам страницы :
В Chrome, когда я вызываю функцию javascript, прокрутка происходит плавно. Но когда я перехожу к якорям через ссылки панели навигации, это не гладко.
Может быть, кто-нибудь объяснит мне, почему ?
Кроме того, с помощью функции Firefox обе прокрутки из навигационной панели & javascript являются плавными. Я думаю, что это немного странно, что одна работа, но не другая.
EDIT : мой обходной путь выглядит следующим образом (vanilla JS / работает со всеми современными браузерами) :
И резервная функция прокрутки :
5 ответов
Я только что столкнулся с интересным поведением: document.body.addEventListener(‘scroll’, f) document.body.onscroll = f; При прокрутке тела обратный вызов в первом случае не срабатывает, а во втором работает нормально. Кто-нибудь знает причину этого? Сначала я предположил, что событие производится.
Я пытаюсь сделать smooth scroll на своей веб-странице. Я думаю, что эта ошибка находится в этой строке, но я не знаю, как ее исправить. a[ ]:target
.panel < -webkit-transform: translateY( 0px); transform: translateY( 0px ); >Я хочу, чтобы все прошло гладко, а не просто перескочило на.
Основываясь на документации , scroll-behavior: smooth не работает с элементом body ( попробуйте ):
Свойство scroll-behavior элемента HTML body не распространяется на видовой экран.
Но он работает на других селекторах, таких как html ( попробуйте здесь ).
Также вы можете попробовать чистое решение JavaScript ( пример ):
Прошло уже некоторое время, но некоторые люди отключили свой JavaScript в браузерах, так что я не думаю, что это был бы лучший вариант. Проблема с добавлением: body
Как вы можете видеть, он не может работать, если он установлен на body . Но он будет работать, если установить его на html :
Хорошая вещь в этом заключается в том, что это кроссбраузерное решение, так как очень редко можно найти браузер, который отключил CSS. Надеюсь, это поможет.
привет всем, я пытаюсь сделать простой виджет scroll share box, но он не работает. Он должен остановиться на специальном div (stopscroll), но он не останавливается и не прокручивается вниз до нижнего колонтитула веб-страницы. есть идеи, почему? var windw = this; $.fn.followTo = function ( elem ) <.
Мой сайт не работает плавно, когда я нажимаю fork и хочу, чтобы он перешел на страницу 2. Я включил сценарий jQuery, который использовал внутри раздела HTML
Возможно, вы хотите попробовать сгладить прокрутку с помощью jQuery. Я думаю, что собственная прокрутка не всегда может поддерживать плавную прокрутку. Вам было бы гораздо безопаснее использовать jQuery.
Если вы используете другие якоря, вам необходимо убедиться, что они предотвращают прыжки и прокрутку по умолчанию. Я бы тоже использовал jQuery.
Я не знаю, нужен ли вам еще ответ на этот вопрос, но я наткнулся на статью, которая исправила его для меня только с css: https://www.fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property/
Это сработало для меня:
Похожие вопросы:
У меня есть расширение Chrome, которое должно производить человекоподобное поведение мыши и клавиатуры (в частности, генерировать события, имеющие значение isTrusted true ). я могу делать все, что.
Если вы проверите эту ссылку http://jsfiddle.net/Hbkdt/ . $(window).scroll(function() < $(.fixed).css(top, $(window).scrollTop() + px); >); Переместите скроллер вниз. Тогда вы можете видеть , что.
Я хочу получить scroll даже и написать это: но когда я запускаю.
Я только что столкнулся с интересным поведением: document.body.addEventListener(‘scroll’, f) document.body.onscroll = f; При прокрутке тела обратный вызов в первом случае не срабатывает, а во втором.
Я пытаюсь сделать smooth scroll на своей веб-странице. Я думаю, что эта ошибка находится в этой строке, но я не знаю, как ее исправить. a[ ]:target
привет всем, я пытаюсь сделать простой виджет scroll share box, но он не работает. Он должен остановиться на специальном div (stopscroll), но он не останавливается и не прокручивается вниз до.
Источник
CSS Smooth scrolling свойство не работает
Я знаю, что это вопрос, который задают многие, но после десятков сообщений я все еще не могу на него ответить.
У меня простая html-страница:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum saepe expedita commodi consectetur ipsum. Deleniti delectus, quas voluptatibus eum dolore accusamus aliquid voluptate a error sunt dolores mollitia. At, mollitia. A nulla eligendi provident exercitationem! Minus perspiciatis eum vel similique, ducimus illum qui sint magnam, asperiores adipisci nesciunt in, rem assumenda repellendus! Blanditiis corporis, quidem dolore expedita consectetur aliquid eius! Similique, provident illo nihil, unde iure perspiciatis corrupti, eius ad sint consequuntur asperiores error harum? Laborum beatae in dolorem ullam itaque quos deleniti quae debitis, magnam autem ipsa deserunt? Illo! Nesciunt perspiciatis a corporis necessitatibus sed asperiores voluptas error saepe tempora rem voluptatibus quae ipsa molestias soluta nostrum, non sunt accusamus fuga numquam ut illo dicta! Deleniti magni doloribus ea. Odio, quas fugiat harum eos animi suscipit dolorum ipsam aliquid perspiciatis, vitae quam assumenda soluta voluptas delectus? Placeat, repellat. Voluptatibus sint blanditiis explicabo similique, exercitationem et tempora consequatur ex asperiores! Animi vel dignissimos inventore eligendi quisquam alias vitae earum itaque neque fugiat rem amet culpa atque delectus quod, tenetur praesentium in autem porro quam qui reprehenderit! Corrupti soluta qui illum. Ut at sint, eius aperiam vitae, magni vel harum distinctio excepturi iusto laborum itaque deserunt cumque eaque. Qui ex quas blanditiis repellat, temporibus ab inventore perferendis sapiente cum quo laborum? Sunt tempora possimus culpa odit numquam, nobis commodi quod, vero repellat autem nostrum laboriosam. Consequuntur hic excepturi in amet unde voluptatibus a? Optio officia obcaecati voluptatem quod dolores minus doloribus? Nihil alias nesciunt veniam modi similique blanditiis officiis, ratione obcaecati dolores aliquid quos iusto ducimus excepturi voluptas expedita, laboriosam corrupti illum quibusdam doloribus quaerat? Quaerat neque quia impedit atque vel. Veritatis placeat officia maiores inventore laborum illo enim vitae, ratione, dolorem esse est! Omnis, libero facere eaque vitae fuga ullam cumque consequatur porro ab recusandae, soluta facilis? Quasi, rem voluptate? Soluta eius molestiae nemo, maiores dolore ratione placeat! Esse, doloribus tempora sint sed rem reiciendis corrupti. Sit mollitia veniam tempora iusto ipsa voluptate quod, eaque veritatis quasi iste hic quas! Corporis pariatur, esse ipsum labore alias accusamus voluptatem veritatis ipsa possimus deserunt veniam deleniti facilis aliquam magni quidem, eligendi tempore ab dicta amet optio nesciunt provident voluptas eaque? Inventore, ducimus. Numquam, deserunt voluptatibus veritatis est omnis ducimus ab tempora cupiditate fuga deleniti officiis velit molestiae facilis eveniet debitis, reprehenderit iure repellendus impedit animi dolorum culpa nostrum rerum illo! Quidem, soluta. Corrupti sapiente eius necessitatibus nostrum incidunt, modi, in quae accusantium totam minima ducimus, aperiam nulla velit eos. Adipisci dignissimos eveniet, quia, voluptatibus unde repellat aperiam doloremque mollitia fugiat minus dolor. Maxime sequi pariatur, quod, esse animi placeat quibusdam excepturi doloremque consectetur culpa commodi enim. Autem voluptas quasi excepturi natus laborum quas ad voluptatibus adipisci repellendus quia, ratione minus cupiditate itaque. Voluptate repellendus id molestiae ipsam impedit aspernatur facere magni. Eveniet aut praesentium officiis ea fugit tenetur pariatur, veritatis deserunt! Beatae, vero odit. Aliquam delectus ipsam maxime repellat tenetur, doloribus iure. Aspernatur vel suscipit sequi enim recusandae ratione perspiciatis, facere, fugiat incidunt, error iusto quibusdam consectetur eos. Quasi vel neque aperiam aliquid rerum, facilis cupiditate deleniti voluptate modi, nihil sunt distinctio.
Second Title
Id totam deleniti sit, magni praesentium velit voluptatum, molestias, recusandae nulla ratione quae blanditiis numquam! Sapiente nam unde quidem. Id dolor libero ipsam dolore incidunt corrupti omnis dolorem! Tempora, impedit? Officia at cum libero unde ipsa veritatis obcaecati est quod delectus sequi voluptatem veniam consequatur sit nobis eveniet eos ab dolore earum vero, molestias nam! Ducimus optio harum necessitatibus debitis. Dignissimos quo aspernatur iste, itaque vel voluptates fugiat dolorem maiores assumenda repellat accusamus, illo praesentium tempora aliquid sed doloribus provident, optio quia nihil. Consectetur optio quisquam eum deserunt nostrum delectus. At libero odio suscipit quae veniam possimus dolores eum praesentium aliquid illo, voluptates similique, dignissimos, magni alias debitis harum nemo. Officia, vel! Quis minima, nesciunt eos ipsum rem quos sed! Ad possimus error, iste facere aut voluptatem odit, voluptatum ea eos fugiat, quas cupiditate? Dolores architecto doloribus repudiandae necessitatibus repellendus officia tenetur perspiciatis, modi fugiat aliquam, tempora unde maiores doloremque. A, nam id et adipisci nostrum natus eligendi ducimus est quos sed eveniet? Nobis saepe placeat optio natus, atque est eius nesciunt, quaerat deleniti velit consequatur laborum molestiae error dolore? Ducimus, quam nostrum ipsam ex dolores maxime impedit corrupti deserunt dolor quod similique. Sed nihil explicabo laudantium a aut provident, ex pariatur aspernatur minus cupiditate saepe accusamus, expedita impedit iste! Vero vel iure, quaerat unde dolore tempora molestias eum facilis cumque consequuntur non totam aperiam cum voluptas qui nihil incidunt fugiat aliquid! Ipsum accusantium vero quod, fugiat soluta illum recusandae. Facere veniam ut est, tempora suscipit temporibus esse exercitationem reiciendis ipsam eaque dolorum, maiores dolorem ducimus voluptatem accusantium. Dicta dolorem reiciendis rerum explicabo sint pariatur illum tenetur. Laborum, tenetur repellat! Inventore, optio quas necessitatibus consectetur atque temporibus porro dolorem dicta incidunt eaque et unde animi! Rem eaque unde placeat accusantium repudiandae blanditiis, quod voluptate natus fuga, nisi sit adipisci totam? Explicabo consequuntur tempore dignissimos, debitis odit mollitia incidunt atque animi esse facere, ipsa ducimus repellendus deserunt laboriosam aliquam. Autem repudiandae voluptate dicta, reiciendis quos iusto voluptates ipsum rem iure incidunt!
Источник
Почему scroll-behavior:smooth не работает, а javascript window.scroll гладко работает?
У меня есть панель навигации для прокрутки вниз до элементов привязки. Навбар находится внутри тела.
На этой странице я также использую некоторые javascript. Один из них-это javascript со следующей функцией для перехода к другим элементам страницы :
В Chrome, когда я вызываю функцию javascript, прокрутка происходит плавно. Но когда я перехожу к якорям через ссылки панели навигации, это не гладко.
Может быть, кто-нибудь объяснит мне, почему ?
Кроме того, с помощью функции Firefox обе прокрутки из навигационной панели & javascript являются плавными. Я думаю, что это немного странно, что одна работа, но не другая.
EDIT : мой обходной путь выглядит следующим образом (vanilla JS / работает со всеми современными браузерами) :
И резервная функция прокрутки :
5 ответов
Я только что столкнулся с интересным поведением: document.body.addEventListener(‘scroll’, f) document.body.onscroll = f; При прокрутке тела обратный вызов в первом случае не срабатывает, а во втором работает нормально. Кто-нибудь знает причину этого? Сначала я предположил, что событие производится.
Я пытаюсь сделать smooth scroll на своей веб-странице. Я думаю, что эта ошибка находится в этой строке, но я не знаю, как ее исправить. a[ ]:target
.panel < -webkit-transform: translateY( 0px); transform: translateY( 0px ); >Я хочу, чтобы все прошло гладко, а не просто перескочило на.
Основываясь на документации , scroll-behavior: smooth не работает с элементом body ( попробуйте ):
Свойство scroll-behavior элемента HTML body не распространяется на видовой экран.
Но он работает на других селекторах, таких как html ( попробуйте здесь ).
Также вы можете попробовать чистое решение JavaScript ( пример ):
Прошло уже некоторое время, но некоторые люди отключили свой JavaScript в браузерах, так что я не думаю, что это был бы лучший вариант. Проблема с добавлением: body
Как вы можете видеть, он не может работать, если он установлен на body . Но он будет работать, если установить его на html :
Хорошая вещь в этом заключается в том, что это кроссбраузерное решение, так как очень редко можно найти браузер, который отключил CSS. Надеюсь, это поможет.
привет всем, я пытаюсь сделать простой виджет scroll share box, но он не работает. Он должен остановиться на специальном div (stopscroll), но он не останавливается и не прокручивается вниз до нижнего колонтитула веб-страницы. есть идеи, почему? var windw = this; $.fn.followTo = function ( elem ) <.
Мой сайт не работает плавно, когда я нажимаю fork и хочу, чтобы он перешел на страницу 2. Я включил сценарий jQuery, который использовал внутри раздела HTML
Возможно, вы хотите попробовать сгладить прокрутку с помощью jQuery. Я думаю, что собственная прокрутка не всегда может поддерживать плавную прокрутку. Вам было бы гораздо безопаснее использовать jQuery.
Если вы используете другие якоря, вам необходимо убедиться, что они предотвращают прыжки и прокрутку по умолчанию. Я бы тоже использовал jQuery.
Я не знаю, нужен ли вам еще ответ на этот вопрос, но я наткнулся на статью, которая исправила его для меня только с css: https://www.fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property/
Это сработало для меня:
Похожие вопросы:
У меня есть расширение Chrome, которое должно производить человекоподобное поведение мыши и клавиатуры (в частности, генерировать события, имеющие значение isTrusted true ). я могу делать все, что.
Если вы проверите эту ссылку http://jsfiddle.net/Hbkdt/ . $(window).scroll(function() < $(.fixed).css(top, $(window).scrollTop() + px); >); Переместите скроллер вниз. Тогда вы можете видеть , что.
Я хочу получить scroll даже и написать это: но когда я запускаю.
Я только что столкнулся с интересным поведением: document.body.addEventListener(‘scroll’, f) document.body.onscroll = f; При прокрутке тела обратный вызов в первом случае не срабатывает, а во втором.
Я пытаюсь сделать smooth scroll на своей веб-странице. Я думаю, что эта ошибка находится в этой строке, но я не знаю, как ее исправить. a[ ]:target
привет всем, я пытаюсь сделать простой виджет scroll share box, но он не работает. Он должен остановиться на специальном div (stopscroll), но он не останавливается и не прокручивается вниз до.
Источник
