Блог

Главная - Вопросы по программированию - Как применить SlimScroll к элементу Body?

Как применить SlimScroll к элементу Body?

#jquery-plugins #element #scroller #slimscroll

#jquery-плагины #элемент #скроллер #slimscroll

Вопрос:

Итак, я пытался применить плагин к элементу Body, и по какой-то причине это просто не работает.. То, что я пробовал: 

 $(function() {
  $('body, html').slimScroll({
    size: '8px',
    width: '100%',
    height: '100%',
    color: '#ff4800',
    allowPageScroll: true,
    alwaysVisible: true
  });
});

$(function() {
  $('#body').slimScroll({
    size: '8px',
    width: '100%',
    height: '100%',
    color: '#ff4800',
    allowPageScroll: true,
    alwaysVisible: true
  });
});

Кто-нибудь знает, что я делаю не так?
Заранее спасибо за ответ

«Что, если у меня нет контроля над тегом body? и я встраиваю шаблон на сторонний сайт? итак, у body нет тега id, у него есть только view-source:avatars.imvu.com/LadyKonstantine «

Ответ №1:

Поскольку вам нужно применить slimscroll к body, вы должны использовать селектор body для jQuery. Код будет выглядеть следующим образом :

     <script type="text/javascript">
      $(function(){
        $("body").slimScroll({
          size: '8px', 
          width: '100%', 
          height: '100%', 
          color: '#ff4800', 
          allowPageScroll: true, 
          alwaysVisible: true     
        });
      });
    </script>

Помните эти

  • Убедитесь, что у вас установлены как jQuery, так и плагин SlimScroll.
  • Прокрутка будет видна, если высота вашего тела превышает 100%

  • Если вы хотите использовать $ («#body») вместо $ («body»), не забудьте добавить 

     <body id="body">

Подробнее

Нажмите здесь! чтобы узнать больше о slim scroll.

Комментарии:

1. Что, если у меня нет контроля над тегом body? и я встраиваю шаблон на сторонний сайт? итак, у body нет тега id, у него есть только <body> view-исходный код: avatars.imvu.com/LadyKonstantine

2. Вы можете просто использовать $ («body»), если у вас нет никакого идентификатора или класса.

3. Крис, пожалуйста, проверьте это, если у вас есть какие-либо сомнения jsfiddle.net/mijoemathew/59pmV и отметьте мой ответ полезным 🙂

4. Спасибо, братан! это действительно помогло мне! 🙂

Ответ №2:

Прикрепление SlimScroll непосредственно к тегу Body, на мой взгляд, не является предпочтительным решением. Попробуйте, и вы обнаружите, что SlimScroll заключает ваш тег BODY в свой собственный тег DIV; по крайней мере, я обнаружил это таким образом, когда попытался прикрепить SlimScroll к элементу BODY. В результате вы обнаружите, что HTML вашей страницы представляет собой полный беспорядок. Последовательность тегов будет HEAD - slimScrollDiv - BODY . Вместо этого я предлагаю иметь DIV-оболочку внутри BODY сразу после открытия тега BODY, а затем прикрепить SlimScroll к этому DIV-оболочке.

Ответ №3:

SlimScroll работает только с элементом div. Для достижения этого добавьте основную оболочку сразу после открывающего тега body. В этом случае я назову это:

В HTML:

 <div id="body"></div>

Затем вычислите высоту окна просмотра, а не высоту HTML-документа. После завершения передайте это значение в height плагина slimscroll. Пример:

В JS:

 var viewportHeight= $(window).height();
$('#body').slimScroll({
    height: viewportHeight 'px',
    color: '#455A64',
    distance: '0',
    allowPageScroll: true, 
    alwaysVisible: true     
});

Ответ №4:

Вы также можете использовать новое CSS-значение vh для вычисления высоты slimscroll. Пример: 

 $('#body').slimScroll({
    height: '100vh',
    color: '#455A64',
    distance: '0',
    allowPageScroll: true, 
    alwaysVisible: true     
});