Scrolltop () не работает плавно в Chrome & Safari, но работают в Firefox -- jquery поле с участием css поле с участием cross-browser поле с участием scroll пол Связанный проблема

scrolltop() is not work smoothly in chrome & safari but work in firefox


3
vote

проблема

русский

Если вы проверяете эту ссылку http://jsfiddle.net/hbkdt/ .

 <код> $(window).scroll(function() {        $(".fixed").css("top", $(window).scrollTop() + "px");     });   

Переместите свой прокрутчик вниз. Тогда вы можете увидеть .fixed div плавно работать в FF, но он не работает плавно в Safari & AMP; Webkit.

Я не знаю, как я могу это исправить. Любая помощь оценивается :)

Я использую Chrome версию 22.0.1229.94 в Mac.

Английский оригинал

If you check this link http://jsfiddle.net/Hbkdt/.

$(window).scroll(function() {        $(".fixed").css("top", $(window).scrollTop() + "px");     }); 

Move your scroller downward. Then you can saw the .fixed DIV work smoothly in FF but it's not work smoothly in Safari & Webkit.

I don't know how can i fix it. Any help is appreciated :)

I am using Chrome Version 22.0.1229.94 in mac.

</div
           
         
         

Список ответов

2
 
vote
vote
Лучший ответ
 

Вы используете только <код> position: absolute и настройки <код> scrollTop на элементе, потому что, когда <код> position: fixed используется, если ширина окна меньше Ширина элемента, часть элемента затем скрыта, даже если вы прокрутите правом, чтобы попытаться увидеть:

http://jsfiddle.net/hbkdt/11/

Другой способ подходить к этой проблеме - это придерживаться <код> position: fixed , а затем для устранения проблемы спрятания элемента:

http://jsfiddle.net/thirtydot/hbkdt/26/ >

left Свойство элемента находится на прокрутке, установленном таким образом, чтобы оказалось, что горизонтальная прокрутка работает по желанию:

 <код> $(window).scroll(function() {     $(".fixed").css("left", -$(window).scrollLeft() + "px");  });   

С момента <код> position: fixed снова используется снова, вертикальная прокрутка идеально гладкая.

 

You're only using position: absolute and setting scrollTop on the element because when position: fixed is used, if the window width is less than the width of the element, a portion of the element is then hidden, even if you scroll right to try to see it:

http://jsfiddle.net/Hbkdt/11/

A different way to approach this problem is to stick with position: fixed, and then to remedy the problem of a portion of the element being hidden:

http://jsfiddle.net/thirtydot/Hbkdt/26/

The left property of the element is on scroll set in a way that makes it appear that horizontal scrolling works as desired:

$(window).scroll(function() {     $(".fixed").css("left", -$(window).scrollLeft() + "px");  }); 

Since position: fixed is now being used again, the vertical scrolling is perfectly smooth.

</div
 
 
1
 
vote

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

что-то вроде этого

 <код> $(window).scroll(function(){     $(".fixed").stop(false, true).animate({ "top" : $(window).scrollTop()}, 1000);  });   

Demo

Это отлично работает, но когда вы начинаете прокручивать с панелью прокрутки, он снова начинает зацикливаться.

Но, чтобы преодолеть это, вы можете использовать это, вы можете использовать Методы debounce .

.
 <код> $(window).scroll(function(){     $.doTimeout( 'scroll', 250, function(){                          // ^ This time prevents the following code to run,                           //   if another scrolling occurs within this time                           //   Thus enabling us to give a smooth scroll effect                          //   Once the user is done scroll          $(".fixed").stop(false, true) //break the queue fast                    .animate({ "top" : $(window).scrollTop()}, 200);     }); });   

Демонстрация

 

I am suggesting an alternative. The most favorable option to give to the smooth effect is to animate the change in position, to fake the easing.

Something like this

$(window).scroll(function(){     $(".fixed").stop(false, true).animate({ "top" : $(window).scrollTop()}, 1000);  }); 

Demo

This works great but when you starting scrolling with the scroll pane it starts stammering again.

But, to overcome this, you can use of debouncing techniques.

$(window).scroll(function(){     $.doTimeout( 'scroll', 250, function(){                          // ^ This time prevents the following code to run,                           //   if another scrolling occurs within this time                           //   Thus enabling us to give a smooth scroll effect                          //   Once the user is done scroll          $(".fixed").stop(false, true) //break the queue fast                    .animate({ "top" : $(window).scrollTop()}, 200);     }); }); 

Demo

</div
 
 
   
   
1
 
vote

Добавить относительную Div внутри фиксированной и отрегулировать его ширину на изменение изменений.

 <код> <div class="fixed">     <div class="container">          <ul>             <li>Resize frame</li>             <li>Test1</li>             <li>Test1</li>             <li>Test1</li>         </ul>         <div class="victim">Why i am not visible</div>     </div> </div>   

js:

 <код> scrollTop0  

CSS:

 <код> scrollTop1  

. Пример jsfiddle

 

Add a relative div inside fixed one and adjust its width on resize.

<div class="fixed">     <div class="container">          <ul>             <li>Resize frame</li>             <li>Test1</li>             <li>Test1</li>             <li>Test1</li>         </ul>         <div class="victim">Why i am not visible</div>     </div> </div> 

js:

jQuery(document).ready(function($) {     var fitWidth = function() {         $(".fixed .container").width(Math.min(             $(window).width(), $(".fixed").width()         ));     };      $(window).resize(fitWidth);     fitWidth(); });​ 

css:

.fixed {     border:1px solid #ccc;     position:fixed;     top:0;     left:0;     width:1000px;     background:red; }  .container {     background: #ff0;     position: relative; }  ... 

​ jsfiddle example

</div
 
 
0
 
vote

В вашем случае, чтобы выбрать свой div в исправление на месте вашей страницы, вам нужно использовать положение CSS <код> scrollTop2 вместо <код> scrollTop3

Ваше событие прокрутки можно удалить, и ваши CSS должны быть такими:

 <код> scrollTop4  

Вот обновленная скрипка: http://jsfiddle.net/hbkdt/17/ < / P >.

 

In your case, to pin your div at a fix location of your page, you need to use the CSS position fixed instead of absolute

Your scroll event can be removed and your CSS should be like this :

.fixed {     padding:20px;     border:1px solid #ccc;     position:fixed;     top:0;     left:0; }​ 

Here is the updated fiddle : http://jsfiddle.net/Hbkdt/17/

</div
 
 
     
     

Связанный проблема

1  Форма подписки Rapidmail перенаправляет после подписки электронной почты - MailChimp  ( Rapidmail subscription form redirect after email subscription mailchimp ) 
Я создаю веб-страницу, которая включает в себя очень простую форму подписки, в основном собирая адреса электронной почты, заинтересованные в продукте. Для это...

0  jQuery: перечислять элементы после удаления  ( Jquery enumerate elements after deletion ) 
Вот упрощенная версия моей страницы: HTML <код> <div id="id-0" class="item">x</div> <div id="id-1" class="item">x</div> <div id="id-2" class="item">x</div...

0  Как изменить цвет фона в jQuery  ( How to change background color in jquery ) 
Я хочу исчезать цвет фона, когда фокусируется; <код> $(document).ready(function() { $('.skiplink').focusin(function(){ $('#skip...

1  JSON Данные не рендеринга в раскрывании Kendo UI  ( Json data not rendering in kendo ui dropdown ) 
пытается сделать <код> Json Возвращенные данные в <Код> kendo Выпадающий список, но не рендеринг. Пожалуйста, найдите код Snippett. Я могу увидеть бдительну...

0  .append () элемент с более чем одним классом  ( Append element with more than one class ) 
Я не могу найти информацию о том, можно ли использовать .append (), чтобы добавить элемент в HTML и дать этому элементу более одного класса <код> $( ".nav"...

-1  Что не так с этим кодом jQuery, его сумасшедшая? [закрыто]  ( What is wrong with this jquery code its driving my crazy ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> закрыт. Этот вопрос не соответствует Рекомендациям переполнения ...

0  Разбор в твиттере JSON  ( Parsing a twitter json ) 
Я использую следующий код для Perfom A Поиск в API Twitter: <код> $.post('lib/themattharris-tmhOAuth-38bd48b/search.php', {q:'@something', pag...

1  JavaScript не работает над динамическим контентом  ( Javascript not working on dynamic content ) 
У меня есть страница, где в HTML Div загружен с другой страницы. На родительской странице у меня есть JavaScript, который имеет элементы, которые применяются ...

0  Показать Скрыть div on click  ( Show hide a div on click issues ) 
У меня есть изображение с классом «Action_image», который при нажатии показывает меню. Это изображение с скрытым меню появляется несколько раз на той же стран...

0  в то время как цикл превышает каждый метод  ( While loop over takes the each method ) 
Я добавляю элемент на страницу, используя статический номер в соответствии с кликом пользователя. Таким образом, элемент имеет серийный номер в соответствии с...

2  jQuery: Создание соответствующих текстовых ящиков влияет на значения друг друга  ( Jquery making corresponding text boxes affect eachothers values ) 
Ситуация: 2 Текстовые поля, TextBoxa и TextBoxB. Я вхожу в текст в TextBoxa, и устанавливает значение TextBoxB. Теперь мне нужно уметь редактировать значени...

0  Как закрыть всплывающее окно, когда видео YouTube играет на кнопке кнопки ESC?  ( How to close popup when youtube video is playing on esc button button ) 
Нажмите меня, чтобы увидеть демонстрацию Когда видео не играет, то кнопка ESC нажала всплывающее окно, но он не работает при воспроизведении видео. ...

6  Как я могу найти неиспользованные CSS в AJAX приложении?  ( How can i find unused css in ajax app ) 
Я искал, и я не могу найти какие-либо дополнения или JavaScript для поиска неиспользованных CSS в приложениях AJAX. Select-Me Selectors Можете сделать са...

3  jquery Выберите и перетащите Chrome Shood  ( Jquery select and drag chrome problem ) 
У меня есть функция выбора и перетаскивания. В основном вы можете выбрать 3 элемента и перетащить их вместе. Проблема в Chrome. Если один элемент имеет «-We...

0  JQuery и Radio Button Help  ( Jquery and radio button help ) 
У меня есть данные, импортируемые из базы данных, и я хотел бы представлять эти данные в наборе радиопередач. Если значение в базе данных - 1 «Статус клиента»...




© 2021 www.qaru.top All Rights Reserved. Q&A House все права защищены


Licensed under cc by-sa 3.0 with attribution required.