Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Scroll without a scrollbar

  1. #1
    Join Date
    Nov 2009
    Posts
    211
    Thanks
    39
    Thanked 0 Times in 0 Posts

    Default Scroll without a scrollbar

    Sample form:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <style type="text/css">
    * {font:13px arial; color:white;}
    body {background:black;}
    label {display:inline-block; width:50px;}
    input, textarea {margin:0; border:1px solid red; padding:0; background:green;}
    textarea {width:300px; height:100px;}
    </style>
    </head>
    <body>
    <form action="#">
    <div><label for="entry_0">Name</label><input type="text" id="entry_0"></div>
    <div><label for="entry_1">Email</label><input type="text" id="entry_1"></div>
    <div><label for="entry_2">URL</label><input type="text" id="entry_2"></div>
    <div id="parent"><textarea id="entry_3"></textarea></div>
    <div><input type="submit" value="Submit"></div>
    </form>
    </body>
    </html>
    I'd like to remove/hide the textarea scrollbar as it doesn't match my form style. I know I can use jQuery plugins to style the scrollbar, but they don't work reliably across different browsers/systems.
    To hide the scrollbar I can use textarea {width:300px; height:100px; overflow:hidden;}, but it completely stops Firefox scrolling through mouse and keyboard.
    I also tried the following workaround:

    Code:
    #parent {width:284px; height:102px; overflow:hidden;}
    textarea {width:300px; height:100px; overflow-x:hidden; overflow-y:scroll;}
    It should work accurately if I add some script to calculate the parent division width:

    Code:
    var textareaWidth = document.getElementById('entry_3').scrollWidth;
    document.getElementById('parent').style.width = textareaWidth + 'px';
    But anyhow the above approach doesn't seem to work in Chrome/Safari:
    Demo: http://jsfiddle.net/RainLover/snTaP/

    Open the above demo in Chrome/Safari >> insert some text into the textarea >> highlight/select a line and drag your mouse to the right and you'll see the scrollbar. Or use the keyboard keys Page Up and Page Down.

    Any corrections or other solutions?

  2. #2
    Join Date
    Jan 2011
    Location
    England
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Try explicitly declaring the rows and cols for the textarea:
    Code:
    <textarea id="entry_3" rows="5" cols="30"></textarea>
    When I added it to your code on that page and pressed Run, typed some text in, it didn't show a scrollbar anymore.

    Kind regards,

    Lc.

  3. #3
    Join Date
    Nov 2009
    Posts
    211
    Thanks
    39
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by LearningCoder View Post
    Try explicitly declaring the rows and cols for the textarea:
    Code:
    <textarea id="entry_3" rows="5" cols="30"></textarea>
    When I added it to your code on that page and pressed Run, typed some text in, it didn't show a scrollbar anymore.

    Kind regards,

    Lc.
    It makes no changes. Thanks anyway!

  4. #4
    Join Date
    Jan 2011
    Location
    England
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    That's strange because I tried it on your site example and also tested it locally and it worked both times.

    Regards,

    Lc.

  5. #5
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  6. #6
    Join Date
    Nov 2009
    Posts
    211
    Thanks
    39
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by bernie1227 View Post
    I've already seen that. It doesn't help.
    Thanks all the same!

  7. #7
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    Quote Originally Posted by Rain Lover View Post
    But anyhow the above approach doesn't seem to work in Chrome/Safari:
    Demo: http://jsfiddle.net/RainLover/snTaP/

    Open the above demo in Chrome/Safari >> insert some text into the textarea >> highlight/select a line and drag your mouse to the right and you'll see the scrollbar. Or use the keyboard keys Page Up and Page Down.
    It's working fine for me in both Chrome and Safari when I highlight and drag or use pg up and pg down keys.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  8. #8
    Join Date
    Nov 2009
    Posts
    211
    Thanks
    39
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by bernie1227 View Post
    It's working fine for me in both Chrome and Safari when I highlight and drag or use pg up and pg down keys.
    You mean in Chrome/Safari the scrollbar doesn't appear when you highlight/select a line and drag your mouse to the right or use the keyboard keys Page Up and Page Down?
    Last edited by Rain Lover; 12-08-2012 at 04:29 AM.

  9. #9
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    That is correct.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  10. #10
    Join Date
    Nov 2009
    Posts
    211
    Thanks
    39
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by bernie1227 View Post
    That is correct.
    That means scrolling behavior differs from system to system even in the same browser. Weird! I tried it on two desktop computers running Windows XP and in the latest versions of Chrome & Safari.
    Last edited by Rain Lover; 12-08-2012 at 04:38 AM.

Similar Threads

  1. FaceScroll scrollbar setting scroll position
    By aztech4mac in forum Dynamic Drive scripts help
    Replies: 14
    Last Post: 06-25-2013, 03:38 PM
  2. Slick Custom Scrollbar script - over scroll
    By jscheuer1 in forum Bug reports
    Replies: 3
    Last Post: 03-09-2012, 12:57 AM
  3. Scroll 2 divs with one scrollbar
    By rizlaa in forum JavaScript
    Replies: 7
    Last Post: 04-18-2011, 01:36 PM
  4. image scroll with horizontal scrollbar?
    By questions in forum CSS
    Replies: 12
    Last Post: 08-09-2008, 04:31 PM
  5. Replies: 1
    Last Post: 05-31-2008, 10:51 PM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •