{"id":3522,"date":"2012-10-12T17:56:34","date_gmt":"2012-10-12T17:56:34","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=3522"},"modified":"2014-11-09T20:42:47","modified_gmt":"2014-11-09T20:42:47","slug":"jscrollpane","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/jscrollpane\/","title":{"rendered":"jScrollPane"},"content":{"rendered":"

JScrollPane es un plugin de jQuery \u00abcross-browser\u00bb creado por Kelvin Luck que convierte las barras de desplazamiento de un navegador por defecto (en elementos con una propiedad de desbordamiento relevante) en una estructura HTML que puede ser f\u00e1cilmente modificada con CSS.<\/p>\n

\"\"<\/a>
\nJScrollPane est\u00e1 dise\u00f1ado para ser flexible y muy f\u00e1cil de usar. Despu\u00e9s de haber descargado e incluido los archivos relevantes en el encabezado del documento todo lo que necesita es llamar a una funci\u00f3n javascript para inicializar el ScrollPane. Los estilos de las barras de desplazamiento resultantes se modifican f\u00e1cilmente con CSS o se puede entre los temas existentes.<\/p>\n

Para utilizarlo necesaritar\u00e1s incluir los estilos necesarios, la librer\u00eda jQuery, el plugin y la llamada al plugin en el <head> de la p\u00e1gina:<\/p>\n

<script type=\"text\/javascript\" src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.4.2\/jquery.min.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"script\/jquery.mousewheel.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"script\/jquery.jscrollpane.min.js\"><\/script>\r\n<script type=\"text\/javascript\">\r\n$(function() {\r\n\u00a0\u00a0 \u00a0$('.scroll-pane').jScrollPane({showArrows: true});\r\n});\r\n<\/script><\/pre>\n
Y podemos a\u00f1adir unos estilos espec\u00edficos para el contenedor con scroll, como por ejemplo:<\/p>\n
<style type=\"text\/css\" id=\"page-css\">\r\n\/* Styles specific to this particular page *\/\r\n.scroll-pane {\r\n\u00a0\u00a0 \u00a0width: 100%;\r\n\u00a0\u00a0 \u00a0height: 200px;\r\n\u00a0\u00a0 \u00a0overflow: auto;\r\n\u00a0\u00a0 \u00a0border:1px solid #CCCCCC;\r\n\u00a0\u00a0 \u00a0padding-left:5px;\r\n}\r\n<\/style><\/pre>\n
Y luego en el <body> a\u00f1adimos el contenedor con el scroll personalizado:<\/p>\n
<div class=\"scroll-pane\">\r\n   <!-- YOUR TEXT OR CONTENT HTML -->\r\n<\/div><\/pre>\n
Ver infinidad de ejemplos y descarga<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
JScrollPane es un plugin de jQuery \u00abcross-browser\u00bb creado por Kelvin Luck que convierte las barras de desplazamiento de un navegador por defecto (en elementos con una propiedad de desbordamiento relevante) en una estructura HTML que puede ser f\u00e1cilmente modificada con CSS. JScrollPane est\u00e1 dise\u00f1ado para ser flexible y muy f\u00e1cil de usar. Despu\u00e9s de haber […]<\/p>\n","protected":false},"author":1,"featured_media":5028,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[60],"class_list":["post-3522","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-scroll"],"yoast_head":"\njScrollPane - Jose Aguilar Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jScrollPane - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"JScrollPane es un plugin de jQuery \u00abcross-browser\u00bb creado por Kelvin Luck que convierte las barras de desplazamiento de un navegador por defecto (en elementos con una propiedad de desbordamiento relevante) en una estructura HTML que puede ser f\u00e1cilmente modificada con CSS. JScrollPane est\u00e1 dise\u00f1ado para ser flexible y muy f\u00e1cil de usar. Despu\u00e9s de haber […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/jscrollpane\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2012-10-12T17:56:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-11-09T20:42:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/jScrollPane.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"338\" \/>\n\t<meta property=\"og:image:height\" content=\"260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/jscrollpane\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/jscrollpane\/\",\"name\":\"jScrollPane - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/jscrollpane\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/jscrollpane\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/jScrollPane.jpg\",\"datePublished\":\"2012-10-12T17:56:34+00:00\",\"dateModified\":\"2014-11-09T20:42:47+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/jscrollpane\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/jscrollpane\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/jscrollpane\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/jScrollPane.jpg\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/jScrollPane.jpg\",\"width\":338,\"height\":260},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/jscrollpane\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"jScrollPane\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"jScrollPane - Jose Aguilar Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"jScrollPane - Jose Aguilar Blog","og_description":"JScrollPane es un plugin de jQuery \u00abcross-browser\u00bb creado por Kelvin Luck que convierte las barras de desplazamiento de un navegador por defecto (en elementos con una propiedad de desbordamiento relevante) en una estructura HTML que puede ser f\u00e1cilmente modificada con CSS. JScrollPane est\u00e1 dise\u00f1ado para ser flexible y muy f\u00e1cil de usar. Despu\u00e9s de haber […]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/jscrollpane\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-10-12T17:56:34+00:00","article_modified_time":"2014-11-09T20:42:47+00:00","og_image":[{"width":338,"height":260,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/jScrollPane.jpg","type":"image\/jpeg"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/jscrollpane\/","url":"https:\/\/www.jose-aguilar.com\/blog\/jscrollpane\/","name":"jScrollPane - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/jscrollpane\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/jscrollpane\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/jScrollPane.jpg","datePublished":"2012-10-12T17:56:34+00:00","dateModified":"2014-11-09T20:42:47+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/jscrollpane\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/jscrollpane\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/jscrollpane\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/jScrollPane.jpg","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/jScrollPane.jpg","width":338,"height":260},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/jscrollpane\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"jScrollPane"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/3522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=3522"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/3522\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/5028"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=3522"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=3522"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=3522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}