Search the Community
Showing results for tags 'Scroll'.
Found 25 results
-
Появляющаяся кнопка включения/выключения аудио при скроллинге
VolKTieR posted a question in Web-site Development
Здравствуйте. Имеется данный код: <audio id="audio"> <source src="audio/1.mp3" type="audio/mpeg"> </audio> <div class="fixedbut" id="sebut">Звук</div> <style> div.fixedbut { position: fixed; bottom: 93%; right: 20px; display: block; background: white; border-radius: 10px; color: black; text-decoration: none; padding: 6px 23px; font-size: 17px ; -webkit-transition: 0.33s all ease-out; -o-transition: 0.33s all ease-out; transition: 0.33s all ease-out; z-index: 999; } div.fixedbut:hover { background: grey; color: white; } </style> <script> document.getElementById("sebut").onclick = function() { var myaudio = document.getElementById("audio"); if(myaudio.paused == true) { document.getElementById("audio").play(); } else if (myaudio.paused == false) { document.getElementById("audio").pause(); } } </script> <script> $(document).ready(function(){ $(window).scroll(function () { if ($(this).scrollTop() > 200) { $('div.fixedbut').fadeIn(); } else { $('div.fixedbut').fadeOut(); } }) }); </script> Кнопка плавающая, останавливает звук включенный другой . Со звуком проблем нет, но появление и исчезание кнопки при прокрутке не работает. Подскажите пожалуйста как сделать)) -
Если в IE потянуть за ползунок скролла, то пока не выполнится процедура onscroll, визуально смещение не происходит. Это, то что нужно. Но, если нажать на стрелку скролла, или между стрелкой и ползунком, или колёсиком прокрутить, то сначала происходит смещение и только после происходит вызов onscroll. Как избежать такого поведения? https://jsfiddle.net/0b9dye0j/
-
Есть такая разметка, возможно она кривая, но в силу некоторой идеи она такая. http://jsfiddle.net/8rqetnyo/ Вложенный слой со скролом, выполняющий роль основного на странице + фиксированный слой, который перекрывает скролл. Как бы вы решили? Быть может оно вообще не решается... ? Была мысль с width: calc но в разных браузерах оно у меня выглядит по разному
-
Посередине первого экрана будет кнопка скрола ко второму. Что нужно писать в джиквери, что бы прокрутить вниз на один экран?
-
DEMO Когда содержимое не помещается в overflow: auto, то элементы внутри прокрутки выходят за свой контейнер появляется горизонтальная прокрутка (Смотри загруженное изображение) Не понимаю, как сделать, чтобы блок overflow: scroll становился такой ширины, как и элементы внутри (расширялся), а не появлялась горизонтальная прокрутка. -
Хочу сделать так, чтобы при наведении на картинку, она прокручивалась вниз, а затем, достигнув нижней точки, прокручивалась аналогично вверх. На данный момент ничего не работает. Если убрать if (), который идет после комментария, то будет работать только прокрутка вниз, до нижней крайней точки. Помогите, пожалуйста. https://jsfiddle.net/11hdy2u8/
-
Здравствуйте. Подскажите хороший плагин кастомного селекта и таким же кастомным скроллом. Желательно 2 в 1. Ну или посоветуйте, как объединить.
-
При вызове модального окна, прокрутка на странице блокируется и элементы немного смещаются в сторону (наверное из-за того, что прокрутка исчезает). Мне надо, чтобы скроллинг на основной странице работал, но в стилях не могу разобраться уже час как. Может у кого-то была такая проблема? Пример простой страницы с модальным окном. До После На песочнице не получается подключить файлы бутстрапа, поэтому выложу архив с страницей приведенной на скриншоте. https://yadi.sk/d/CPBzvMDjnyRgd
-
Мобильная версия сайта скроллится идеально на андроиде http://imgur.com/XeFTTES Но на айфоне скролл ломается и он нереально быстрый http://imgur.com/5UruYUI Заметил, что при открытии сайта на айфоне в код добавляется новый <div> и правка в <body>, хотя в index.html их нет <body class="scroll_wrapper" style="top: -184.702px; left: 0px;"><noindex></noindex><div id="webit_scroll_provider_wrapper" class="html" style="padding-top: 0px; padding-bottom: 0px; width: 100%; min-width: 480px;">Так же в CSS нашел это: .scroll_wrapper{ position: absolute; overflow: auto; left: 0px; right: 0px; top: 0px; bottom: 0px; padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 0px;}Но никак не пойму в чем проблема. Помогите, пожалуйста. Как исправить?
-
Доброго дня. http://codepen.io/npofopr/pen/xwWqWX как побороть скролл в ФФ для baron, под виндой, видимо? где то видимо overflow: hidden; не хватает, но найти не могу где. Оно или скроллить перестаёт или 2 скролла. Потому что в примерах всё работает.... Может пользовался кто нибудь baron?
-
Здравствуйте! Возникает проблема с вёрсткой на сайте на "просмотрщиках веб страниц" iPhone. На Android всё хорошо, на разных браузерах. Проблема в следующем, не блокируется скролл во всплывающем меню http://cartersbaby.ru/ на этом сайте. Вот примерные изображения проблемы: Собственно серого фона не должно быть, так же как и скролла долгого. В css забита высота этого серого элемента, но стоит overflow: hidden. Допускаю собственную ошибку, но на Android и эмуляторе в Chrome проблем нет.
-
jQuery Не работает скрипт появления блока при скроллинге
Sergo Skiller posted a question in JavaScript
Здравствуйте. Скажу сразу, что только начал разбираться в JavaScript и jQuery, в качестве подопытных выбрал свои старые работы. В общем, захотел сделать так, чтобы при скроллинге начинал проявляться блок с примерами работ, написал скрипт, без ошибок, правильный со всех (вроде) точек зрения, но он почему-то не работает - блок как был на месте, так там и остался. Писал его по следующему алгоритму: 1) Получение расстояния блока от начала документа методом .offset().top 2) Получение высоты окна методом $(window).height() 3) Вычитание из .offset().top высоты окна (var distanceTop = $('#container').offset().top - $(window).height() ) 4) Получение величины скроллинга методом $(window).scrollTop 5) Сравнение: если distanceTop меньше, чем $(window).scrollTop, то запускается анимация проявления блока $('#container').animate({'opacity':1}, 3000), иначе анимация его скрытия $('#container').animate({'opacity':0}, 3000) Вот ссылка на папку в Яндекс Диске с исходными файлами: https://yadi.sk/d/fz37oI69irTKa Сайт на хосте: http://erudit.esy.es/ Вот код скрипта: $(document).ready(function(){ $(window).scroll(function(){ var distanceTop = $('#container').offset().top - $(window).height(); if ($(window).scrollTop > distanceTop){ $('#container').animate({'opacity':1}, 3000); }else{ $('#container').animate({'opacity':0}, 3000); } });});Заранее благодарен за помощь. -
Всем доброго времени суток! Требуется помощь в решении такой вот проблемы: В js-файле имеется вот такой вот код $(window).scroll(function () { // тут какой-то код }); И этот js-файл подключается ко многим страницам. Но на некоторых действие при скролле не требуется. Так вот как можно его отменить? И еще вопрос по той же теме: Почему javascript выполняет оба кода, кода они расположены на одной страницы друг под другом, а не перезаписывает один другим? Как это работает? $(window).scroll(function () { // тут какой-то код 1 }); $(window).scroll(function () { // тут какой-то код 2 }); Спасибо всем, кто откликнется!
-
Здравствуйте! Помогите советом. Имеем стандартное меню с выпадающими списками. Основные пункты меню ведут на соответствующий раздел, подпункты ссылки с якорями осуществляют плавный переход к соответствующему блоку на странице. Возникла проблема следующего типа: Находясь в своейм разделе подпункты работают как и подобает ссылке с якроем, а вот подпункты из другого раздела не работают как ссылки. Ссылка типа: http://temp.loc/#block-1Работает как якорь. Ссылка типа: http://temp.loc/?page=2#block-2Работает как и подобает ссылке, но как её заставить работать с плавным переходом?
-
Здравствуйте. Подскажите, может кто знает готовый слайдер с подобным функционалом. Чтоб были и элементы листания по одному слайду и обычный скролл которым можно потихоньку двигать. Как вариант может хотя бы скролл, который двигает по целому слайду и перемешается на большее делении сразу.
-
Подскажите как сделать прокрутку по блокам. хочу разбить страницу таким образом, чтобы при одном прокручивании колеса страница переходила на след блок. Что-то в виде должно получиться))
-
Здравствуйте! Проблема в следующем скрипте: var lastScrollTop = 0; $('html, body').scroll(function(event){ var st = $(this).scrollTop(); if (st > lastScrollTop){ //вниз console.log(st); //toTop } else { // вверх console.log(st); } lastScrollTop = st; });Эти строки отслеживают прокручивание страницы, раньше я им пользовался и без проблем работал. Сейчас же решил прикрутить его на http://vocis.ru и тут я себе "сломал нос о стену", изначально он работал с селектором window. var lastScrollTop = 0; $(window).scroll(function(event){ var st = $(this).scrollTop(); if (st > lastScrollTop){ //вниз console.log(st); //toTop } else { // вверх console.log(st); } lastScrollTop = st; });Теперь же только "html, body" и то только в Firefox, проблема с откреплённым меню и кнопкой "вверх", Chrome выписывает "0". В чём причина не могу понять. Подозреваю что это может быть из-за дублей библиотеки jQuery, но оставив одну функционал пропадает. И это собственно не единственное что не работает - плагин scrollTo так же не хочет работать и не срабатывает плавный скролл. Скрипты что проблемные без проблем работают на других страницах, на этом же сайте не хотят. Действительно ли дело в дублях jQuery или я что то упустил? Ошибок консоль не выдаёт.
-
Народ, кто работал с SVG? Возможно ли внутри <svg> использовать некий элемент со скроллом? Объясню проблему подробнее. Есть некий viewport, у него фиксированные размеры (заточенные под iPhone 5), т.е. 320px x 568px. Этот вьюпорт масштабируется при помощи viewBox. Ниже код: <svg width="100%" height="100%" viewBox="0 0 320 568"></svg>Делается это для мобильника, чтобы при смене ориентации экрана всё масштабировалось. Поэтому поверх SVG положить <div> c overflow: hidden; не могу.
-
Подскажите, как перекрасить scroll?
-
Вопрос для знатоков. Есть такая верстка. Вопрос заключается в том почему в Chrome и Opera у элемента с классом "panel" появляется вертикальный скрол-бар. И как от него избавиться. Естественно решение просто убрать overflow: auto не подходит. Тестировал в Chrome 36 и Opera 20.
-
Всем привет! Есть DIV, в котором находится таблица. По идее таблица должна выходить за пределы этого DIV, а чтобы увидеть остальную часть таблицы нужно проскроллить. У меня таблица встраивается в пределы DIV и не хочет выходить за его пределы. Пытался менять width у элементов таблицы, ставить overflow: scroll у DIV но ничего не выходит. Таблица все также пытается втиснуться в DIV. Как сделать так, чтобы таблица имела определенную длину, показывала только часть себя и появился скролл для передвижения по этому DIV. как-то так:
-
Как убрать вертикальную полосу прокрутки у Айфрейма,но оставить возможность прокручивать...
-
Есть 2 фрейма, но во втором, где должен быть контент, нет полос прокрутки, скролла. Я пробовал самые разные способы: добавлял div в котором был overflow, scrolling="yes/auto", ничего не помогло. В чем может быть проблема? Оставлю "сайт" тут: http://risovalka-16.hol.es/html/index.html
-
Здравствуйте! Подскажите, пожалуйста, как при скролинге страничке, сделать, что бы div2 вставал на место div1 (т.е. уходил верх)? При скролинге в топ - блоки возвращались на свою позицию. Спасибо! Код на http://cssdeck.com/labs/i1jxnjzh <html> <title>hello word</title> <style> body{ margin:0px; padding:0px; } .div1 { width: 100%; text-align: center; background-color: #e1e1e1; height: 40px; line-height: 40px; } .div2 { width: 100%; text-align: center; background-color: #888888; position: fixed; height: 30px; line-height: 30px; } .div3 { margin-top: 30px; } </style> <head> </head> <body> <div class="div1"> hello, hide me </div> <div class="div2"> scroll me </div> <div class="div3"> scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br> </div> </body> </html>
-
Добрый день! Не подскажите, как определить, когда заканчивается прокрутка? Нужно подсчитывать высоту блоков при начале прокрутки, а при событии scroll все тормозит.
