Results 1 to 7 of 7

Thread: Scoll bar issue

  1. #1
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    454
    Thanks
    8
    Thanked 44 Times in 42 Posts

    Default Scoll bar issue

    Currently, I have a div that contains multiple uls. The div has an overflow-x: hidden; while the uls. Have a max-height. The issue that I am running into is that if you click on one of the first link (EG the 1) It will change scroll over to the first selection list by Jquery.

    The issue that if I mouseover the second list I cannot use the scroll wheel to move it. Please note, to get the jsfiddle working correctly with my error hit the run button once. It sometimes works and I am not sure why.

    If anyone has an idea why this is happening that would be great. It is probably something simple I am overlooking.

    https://jsfiddle.net/1fag00xy/
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,373
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    Might just be an artifact of the js fiddle environment. In any case, sometimes, if I remove focus from the tab (go to another tab, or program) and come back, click on the page, the mouse wheel then works as expected. All the time, so far, if I open the console, disable the overflow-x: hidden, re-enable it, close the console, then it scrolls properly. You might try adding the overflow-x: hidden using jQuery instead of the stylesheet. I'd also try it on a "real" page. One without all the overhead of a fiddle.

    One other thing I notice is that if I click on the javascript panel's settings icon, that also seems to fix it - adding to suspicion it's just something about the fiddle environment. But this all may just mean it has to do with focus somehow.
    Last edited by jscheuer1; 10-04-2017 at 02:53 PM. Reason: add info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    454
    Thanks
    8
    Thanked 44 Times in 42 Posts

    Default

    Oh I am testing it on a real page also and the same issue arises.
    Last edited by Deadweight; 10-04-2017 at 05:54 PM.
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,373
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    OK, will have a closer look when time allows, probably soon. Still suspect some sort of focus issue(s). Have you tried messing around with focus?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,373
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    No firm idea why (though it does follow from my initial suspicions), and I wouldn't recommend it without exhausting all other simpler, more direct approaches, but this appears to work:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <style type="text/css">
    *, html, body {	padding: 0px; margin: 0 auto !important; }
    .dwDropDown { width: calc(21 * 10px); border: 1px solid black; position: relative; }
    .dwDropDown>.dwDDWrapper {
    	position: absolute; top: 100%; left: -1px;
    	border: 1px solid black; border-top: none;
    	width: 100%; 
    }
    
    
    .dwDropDown .dwDDSearch {
    	padding: 2px;
    	background-color: orange;
    }
    .dwDropDown .dwDDSearch>input { 
    	width: calc(100% - 4px);
    	border: 0px;
    	outline: none;
    	padding: 2px;
    }
    
    
    .dwDropDown .dwItems {
    	max-height: calc(10 * 18px);
    	overflow-y: auto;
    	vertical-align: top;
    }
    
    
    .dwDropDown .dwTabList {
    	white-space: nowrap;
    	overflow-x: hidden;
    }
    .dwDropDown .dwTabList>ul {
    	display: inline-block;
    	width: 100%;
    }
    </style>
    </head>
    <body>
    <div id="test" class="dwDropDown"><span>Master</span><div class="dwDDWrapper"><div class="dwDDSearch"><input id="kludge" type="text" placeholder="Search"></div><div class="dwTabLocater">Menu</div><div class="dwTabList"><ul class="dwItems dwMenu"><li>1</li></ul><ul class="dwItems"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li></ul></div></div></div>
    <script>
    $(document).on({
    	click: function() {
    		var i = parseInt($(this).index()) + 1;
    		var w = $(this).width();
    		$(this).closest('.dwTabList').animate({'scrollLeft' : (w * i) + 'px'},200, function(){$('#kludge').focus().blur();});
    	}
    },'.dwMenu');
    
    $(document).on({
    	click: function() {
    		$(this).parent().children('.dwTabList').animate({'scrollLeft' : '0px'},200);
    	}
    },'.dwTabLocater');
    </script>
    </body>
    </html>
    I actually refined this, and I think I know why it works. When you click on the ul, it or a parent gets focus, but then it's immediately hidden so cannot respond to the wheel. By shifting the focus to the input we free it (focus) up. I just added the blur because, logically it should be blurred at that point (having just clicked on the ul).
    Last edited by jscheuer1; 10-05-2017 at 12:48 PM. Reason: minor code improvement and add info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Deadweight (10-05-2017)

  7. #6
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    454
    Thanks
    8
    Thanked 44 Times in 42 Posts

    Default

    I'll take a look at this once I get home to see if that is the issue. Thanks
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  8. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,373
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    Yeah well I only did limited testing, and even if it bears out, it's hokey. But then focus is hokey in general. You aren't allowed to grant focus to just any element. And this shouldn't even be an issue to begin with if the browsers were acting as they probably should.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Script to animate GIF on Webpage Scoll
    By spyke89 in forum Looking for such a script or service
    Replies: 1
    Last Post: 03-26-2012, 10:58 AM
  2. Replies: 3
    Last Post: 02-15-2011, 02:37 AM
  3. How to get scoll bar top and bottom positions of a listbox ?
    By mahesh.komuravelli in forum JavaScript
    Replies: 0
    Last Post: 05-12-2009, 06:03 AM
  4. AnyLink Drop Down Menu - border issue *and* FF alignment issue
    By trjonas in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 12-18-2007, 05:58 AM
  5. Email issue -- Carbon Copy Issue
    By Humper in forum JavaScript
    Replies: 0
    Last Post: 09-01-2006, 07:26 PM

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
  •