Member Avatar for Jansz36

Hello,

I am quite new, in Dreamweaver CS4 I have 2 a 3 sites with lot's text as information. The customer do not want have a scroll bar viewing on this particular site location. I was wondering how can I exclude the scroll bar viewing in the browsers with keeping text scrolling if the text is too long by mouse over i.e.?

see below the CSS code:

}
#BodyText {
    position:absolute;
    left:265px;
    top:90px;
    width:400px;
    height:555px;
    z-index:3;
    color: #FFF;
    text-align: justify;
    font: normal 14px Gill Sans, Gill Sans MT, sans-serif;
    padding-right: 10px;
    font-family: "Gill Sans", "Gill Sans MT", sans-serif;
    font-size: 14px;
    overflow: auto;

and the site source code;

<div id="master">
  <div id="Background">
    <div class="menu" id="BodyText">
      <p>2010 Nieuws construction Under construction Under construction Under construction Under construction Under construction Under construction Under Under construction Under construction Under construction Under construction Under construction Under construction Under construction Under Under construction Under construction Under construction Under construction Under construction Under construction Under construction Under Under construction Under construction Under construction Under construction Under construction</p>
      <p> Under construction Under construction Under Under construction Under construction Under construction Under construction Under construction Under construction Under construction Under Under construction Under construction Under construction Under construction Under construction Under construction Under construction Under Under construction Under construction Under construction Under construction Under construction Under construction</p>
      <p>Under construction Under construction Under construction Under construction Under construction Under construction Under construction Under Under construction Under construction Under construction Under construction Under construction Under construction Under construction Under Under construction Under construction Under construction Under construction Under construction Under construction Under construction Under Under construction Under construction Under construction Under construction Under construction Under construction Under construction Under Under construction Under construction Under construction Under construction. Under construction Under construction Under construction Under construction Under construction Under construction Under Under construction Under construction Under construction Under construction Under construction Under construction UnderUnder construction Under construction Under construction Under construction Under construction Under construction UnderUnder construction Under construction Under construction Under construction Under construction Under construction Under</p>
    </div>

Thanks so much indeed!

Edited by mike_2000_17 because: Fixed formatting
  • 2 Contributors
  • 2 Replies
  • 98 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Jansz36

Dani AI

Generated

Brief summary and practical path forward:

As pointed out, forcing the overflow to be hidden will remove the native scrollbar — but it also stops native scrolling, which is not what you want. If the goal is “no visible scrollbar but still allow scrolling,” do two things: (1) keep the element scrollable, and (2) hide the native scrollbar visually with cross‑browser rules. Then provide your own visible controls (up/down arrows) so users always have an obvious way to move the text.

CSS (hide native scrollbar while leaving scrolling enabled)

/* keep the element scrollable in your existing styles; these lines only hide the native bar */
#BodyText {
  -ms-overflow-style: none;    /* IE/Edge */
  scrollbar-width: none;       /* Firefox */
}
#BodyText::-webkit-scrollbar {
  width: 0;
  height: 0;                   /* Chrome, Safari, Opera */
}

Custom up/down controls (basic JS)

var container = document.getElementById('BodyText');
document.querySelector('.arrow.up').addEventListener('click', function () {
  container.scrollBy({ top: -120, behavior: 'smooth' });
});
document.querySelector('.arrow.down').addEventListener('click', function () {
  container.scrollBy({ top: 120, behavior: 'smooth' });
});

Notes, testing and accessibility

  • Test on macOS and some mobile browsers: OS/browser settings can force scrollbars to show (macOS user preference may override hiding). See Apple's note on scroll bar visibility: Change when scroll bars appear on Mac.
  • Ensure keyboard access: allow focus on the container or provide focusable arrow buttons and ARIA labels so keyboard and screen‑reader users can navigate. WebAIM resources on keyboard accessibility are useful.
  • Cross‑browser references: MDN pages for the scrollbar pseudo element and Firefox/IE properties: ::-webkit-scrollbar and scrollbar-width.
  • If the scroll area is the whole page, browser/OS behavior is harder to control; prefer a contained scrolling element for a reliable, stylable solution.

Recommended Answers

All 2 Replies

Member Avatar for SikoSoft

Change overflow: auto; to overflow: hidden;

If this is for the main body/HTML of the page, it may not work in all browsers as it's kinda up to the browser if the scroll bar will always appear.

Or was this not what you were referring to?

Member Avatar for Jansz36

Thanks I am aware about your suggestion...but I would like have the scroll bar not be display in the browsers. The customer don't like the scroll bar in the layout. Is it possible to have only down and up arrows? Only the text must be able scroll when it is longer. Pls see the attached scroll bar viewing.png

Thank you so much already for your kind help!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.