Html Question posted in
Some basic documentation can be found here.

Html – Hide horizontal scrollbar in <iframe> displaying a PDF

I found a good solution to embed a gallery of PDFs on my website using Swiper.js. However, I have a couple of issues: I dislike the dark grey color of the Google PDF preview, and I want to hide the horizontal scrollbar, which currently aligns the content to the top left.

Is there a way to remove that scrollbar without removing the possibility of scrolling?

P.S. The result looks perfect on mobile, centered without the scrollbar and the extra dark grey on the left and right.

I’ve tried using scrolling="no" in the and applying overflow: hidden in the CSS.

I also tried to use iframe::-webkit-scrollbar and display:none

Tags:

2

Answers


  1. 0

    To hide the scrollbar while maintaining scroll functionality, add the following:

        .pdf-wrapper {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden; /* Hide scrollbar but maintain scroll functionality */
    }

    .pdf-frame {
      width: 100%;
      height: 100%;
      border: none;
      position: absolute;
      top: 0;
      left: 0;
      /* Hide scrollbar while maintaining functionality */
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE and Edge */
    }

    /* Hide WebKit scrollbar while maintaining functionality for Chrome and Safari */
    .pdf-frame::-webkit-scrollbar {
      display: none;
    }

    You can read more about it here: Why does -ms-overflow-style exist?

    Now, to fix the dark grey background, you will need to set the background to white using both the container and a pseudo-element and add proper centering using flexbox: https://www.w3schools.com/css/css3_flexbox.asp

    Another option, you can modify the white background color to match your website’s theme if needed.

    Also don’t forget to add #toolbar=0&navpanes=0 to the PDF URL to hide the default PDF viewer controls

    Can I hide the Adobe floating toolbar when showing a PDF in browser?

    Login or Signup to reply.
  2. 0

    The scrollbars are provided by the PDF plug-in "as required" Thus non programmable generically, unless the PDF plugin (and there are many dozens of variations) provide a programming API over-ride for scrollbars (or colours). To do that you would need to use a Mozilla PDF.js variant. NOTE that the user decides if PDF is allowed to be manipulated in their device and can thus disable pop-outs or Java Scripts.

    Typical slider PDF behaviour in Chromium’s such as Brave, Edge, Opera, etc.
    enter image description here

    Typical iFrame behaviour in a recent Firefox Browser, thus size of frame dictates scrollbar appearance/behaviours.

    enter image description here

    Another User controlled browser may be a "no show"
    enter image description here

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search